top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

Small Discussion About Pug in HTML?

0 votes
564 views

What is Pug?

The general rendering process of Pug is simple. pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “ locals ”) as an argument. Call that resultant function with your data, and voilà!, it will return a string of HTML rendered with your data.
Pug is a high performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers. For bug reports, feature requests and questions, open an issue. For discussion join the chat room.

Node Command

npm install pug

Pug also provides the pug.render() family of functions that combine compiling and rendering into one step. However, the template function will be re-compiled every time render is called, which might impact performance. Alternatively, you can use the cache option with render, which will automatically store the compiled function into an internal cache.

Example:

p #{name}'s Pug source code!

const pug = require('pug');

// Compile the source code
const compiledFunction = pug.compileFile('template.pug');

// Render a set of data
console.log(compiledFunction({
  name: 'Timothy'
}));
// "<p>Timothy's Pug source code!</p>"

// Render another set of data
console.log(compiledFunction({
  name: 'Forbes'
}));
// "<p>Forbes's Pug source code!</p>"

 

Video for Pug Getting Started

 

posted Nov 17, 2017 by Manish Tiwari

  Promote This Article
Facebook Share Button Twitter Share Button LinkedIn Share Button


Related Articles

What is EJS?
EJS is a simple templating language that lets you generate HTML markup with plain JavaScript.
EJS combines data and a template to produce HTML. 

<%= EJS %>

EJS Stands for Effective JavaScript templating.

Like ERB, JavaScript between <% %> is executed. JavaScript between <%= %> adds HTML to the result.

Features:

  • Fast compilation and rendering
  • Simple template tags: <% %>
  • Custom delimiters (e.g., use <? ?> instead of <% %>)
  • Includes
  • Both server JS and browser support
  • Static caching of intermediate JavaScript
  • Static caching of templates
  • Complies with the Express view system

 

Install EJS with NPM

$ npm install ejs
Video for EJS
https://www.youtube.com/watch?v=3Jz18kXCLwg
 
 
 
READ MORE

What is Jade?

Jade can be used just as a short hand for HTML

Jade is an elegant templating language focused on enabling quick HTML coding. No more XML situps and percent prefixes for tags.

Jade is whitespace sensitive, so there's no need to close your tags; Jade does that for you. You can also nest tags within other tags just by indenting them.

Jade Code Structure

pageTitle = "Jade Rocks!"
doctype 5
html(lang="en")
    head
        title= pageTitle 
        script
            console.log("hi");
    body
        p.greeting Hello, World!

Html Code Structure   


 <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade Rocks!</title>
    <script>console.log("hi");
</script>
  </head>
  <body>
    <p class="greeting">Hello, World!</p>
  </body>
</html>

 Video about Jade

https://www.youtube.com/watch?v=xNoWTLsZbaU

READ MORE

Tables

Tables allow you to view your data in a structured and classified format. Tables can contain any type of data such as text, images, links, and other tables. You can create tables for displaying timetables , financial reports, and so on.

A table is made up of rows and columns. The intersection of each row and column is called as a cell. A row is made up of a set of cells that are placed horizontally. A column is made up of a set of cells that are placed vertically.

You can represent your data in a tabular format by using the TABLE element in HTML. The TR element divides the table into rows and the TD element specifies columns for each row. By default, a table does not have a border. The border attribute of the TABLE element specifies a border for making the table visible in a web page.

 

Note: The above code is use for to create a table. The border attribute of table element gives a border to the table, which is 1 pixel wide. The TR element within the TABLE element creates rows. The ID element creates two cells with the values English and German in the first row and French and Italian in the second row.

Table Headings

You can specify the heading for each column in HTML. TO specify the heading for columns in a table, you use the TH element. The text included within the TH element appears in bold.

The code displayed in the graphic creates a table with a heading. To create a table:

1. The TABLE element creates a table with a border of 1 pixel

2. The TH element provides three column headings namely Name, Age, and Place.

3. The second and the third rows list the details of the students in the three columns.

                         

“Colspan” Attribute

You might feel the need to span two or more cells while working with tables. Spanning refers to a process of extending a cell across multiple rows or columns. To span two or more columns, you use the colspan attribute of the TD and TH elements.

The colspan attribute allows you to span a cell along a horizontal row. The value of the colspan attribute specifies the number of cells across which a specific cell shall be expanded.

Note: The code creates a tale with a border of 1 pixel. The TH element specifies two column headings namely Information Technology and Accounts. Each of these header cells horizontally span across the two cells by setting the colspan attributes of the TH element to 2. Each of these headings has two sub-headings namely Name and Location, which specify the name and location of employees.

 

“rowspan” Attribute

The rowspan attribute spans a data cell across two or more rows. It allows you to span a data cell along a vertical column. Like the colspan attribute, the rowspan attribute can be used within the TD and TH elements.

 

 

Note:  The code creates a table with a border width of 1 pixel. The three TH elements within the TR element specify column headings namely Manufacturer, Model, and Price. The rowspan attribute of the TH element combines the three rows of the Manufacturer column into a common brand namely Audi. The three different models and the respective prices of the Audi brand are displayed in three different rows. Similarly, the rowspan attribute of the TH element combines the next two rows of the Manufacturer column into a common brand called BMW.

 

Horizontal Alignment

Alignment determines the representation of text along the left, right, or center positions. In HTML, by default, the data within the table is aligned on the left side of the cell. Sometimes, you might need to align the data to some other position for improving the readability or focusing on some data. To horizontally align the contents of the cell, you use the align attribute. The four possible value of the align attribute are:

  • Left: Aligns the data within the cell on the left side. This is the default value for table content.
  • Center: Aligns the data within the cell on the center. This is the default value for table headings.
  • Right: Aligns the data within the cell on the right side.
  • Justify:  Aligns the data within the cell by adjusting the text at the edges.

Note: The code uses the align attribute inside the TR element to align the data within the row. The table content is center aligned by setting the value of the align attribute to center.

 

Vertical Alignment

You can vertically align the position of data by using the valign attribute. The valign attribute can be used with TD, TR, and TH elements. The possible values of the valiign attribute are:

  • Top: Aligns the data within the cell at the top.
  • Middle:  Vertically aligns the data within the cell at the center.
  • Bottom: Aligns the data within the cell at the bottom.

Note: The code creates a table by specifying the width attribute as 300. The width attribute specifies the width of a table. The align attribute is set to the value cinter, which specifies that the data within the rows are centrally aligned. The valign attribute is set to the value top, which specifies that the data within the cell will be aligned at the top.

 

Margin Attributes

The data in a table might appear cluttered, which may affect the readability. This might make it difficult to comprehend data as the data. To overcome this issue, you use the cell margin attributes. The two cell margin attributes that can be used within the TABLE element are:

  • Celpadding: Defines the space between the contents of the cell and the edges of the cell. The default value is 1. 
  • Cellspacing: Defines the space between the table cells. The default value is 2.

Note: The code creates a table and the value of the cellspacing attribute within the TABLE element is set to 5. This indicates that the space between two table cells should be 5 pixels wide. The cellpadding attribute is set to 5, which indicates that the space between the contents of the cell should be 5 pixels wide.

 

“CAPTION” Element

You can add a heading to a table in HTML. To specify the main heading for your table, you use the CAPTION element. The CAPTION element defines a caption for your table. It is a sub-element of the TABLE element. Unlike the TH element that is used to specify a heading to an individual row or column, the CAPTION element allows you to specify a title for your entire table.

Note: The code creates a table of border width of 1 pixel. The CAPTION element that is used inside the TABLE element specifies a caption to the entire table as travel expense report.

For more go through this video:

https://www.youtube.com/watch?v=em5zhA4Of3w

READ MORE
...