Meta tags
• charset: Specifies the character encoding
• viewport: Optimizes the page for different screen sizes
• description: A brief summary of the webpage for search engines.
• keywords: Keywords relevant to the webpage content.
• author: Author of the webpage.
Inserting Metatag (HTML code)
***In Dreamweaver, you may use code or go to Insert>>HTML>>Head tags>>***
<meta charset="Replace encoding name" />
<meta name="author" content="Taraweb" />
Loading…
<meta name="keywords" content="Taraweb, Weather" />
<meta name="description" content="Write the description from the
question" />
<meta name="viewport" content="width=device-width,
initial-scale=2.0" />
<base target="_blank" />
Inserting Anchor(HTML code)
Anchor must be written underneath
<body>. Anchor name is written as id
<html> attribute.
<head> <title> Title here </title>
</head>
<body>
<a id=“Top”> </a>
<a href=“#Top”>Go to the Top </a>
</body> Anchor will be linked with a text
from the question and it is linked
</html> using href=“#Name”.
Inserting Table (HTML code)
We write table tag inside <body> </body> tag. But for table tag, you don’t need to
<table>
memorize the structure. Just focus on opening and closing tag.
<tr>
<th>Header 1</th>
<th>Header 2</th> <th> stands for table header, it is used to create a cell that
contains header information. Typically, this is used in the
</tr>
first row of the table to label the columns. Text inside
<tr> <th> is bold by default and center aligned.
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td> <tr> stands for table row, it is used to create a row in the
</tr> table. Inside a <tr> element, you can place <th> or <td>
elements to create the cells of the row.
<tr>
<td>Row 2, Cell 1</td> <td> stands for table data, it is used to create a regular
<td>Row 2, Cell 2</td> data cell in the table. Typically, this is used to display the
</tr> data for each row of the table. Text inside <td> is regular
by default and left aligned
</table>
Inserting Table (HTML code)
<table class="table-style">
<tr> We can add “class” attribute to table tag to style the table with CSS.
<th id="th-style1">Header 1</th> class is for Group category and id is for unique (one time or one name)
<th class="th-style">Header 2</th> category.
</tr>
.table-style { #th-style1{
<tr>
border: 1px solid black; background-color: gray;
<td id="td-style1">Row 1, Cell 1</td> width: 100%; color: white;
<td class="td-style">Row 1, Cell 2</td> } }
</tr> .th-style{ #td-style1{
background-color: gray; text-align: center;
<tr>
color: white; padding: 10px;
<td class="td-style">Row 2, Cell 1</td> } }
<td class="td-style">Row 2, Cell 2</td> .td-style{
</tr> text-align: center;
padding: 10px;
</table>
}
CSS Code Structure
Background Color (CSS Code)
body RGB If question says “Only Green with no red or blue.”
{
background-color: #00ff00;
}
Text Color (CSS Code)
HTML Element names body, h1,h2,h3,…,p,td
{
color: #00ff00;
}
Font Family (CSS Code)
HTML Element names body, h1,h2,h3,…,p,td
{
font-family: Calibri, “Helvatica Neue”, sans-serif;
font-size: 30pt; Only add quotation “ ” if there is a space between words.
color: #00ff00;
font-style: italic; font-style: normal;
font-weight: bold;
}
Alignment and Padding (CSS Code)
table Only if we are aligning the element from the screen edge, we use margin-left, margin-right.
{ Mainly used for table element.
margin-left: auto;
margin-right:auto;
}
td, h1,h2,h3,p
{ Only in HTML, we use align=“center” not text-align.
text-align: auto;
text-align: left;
text-align: center;