Scribd
Upload
11 views

Internet Programming and Web Design - Lesson 3

HTML headings are defined with tags from <h1> to <h6> to specify different heading sizes, with <h1> being the largest and <h6> being the smallest. Styling HTML elements can be done with inline styles using the style attribute and CSS properties like background-color, color, font-family, font-size, and text-align.

Uploaded by

Emily Musembi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

Internet Programming and Web Design - Lesson 3

HTML headings are defined with tags from <h1> to <h6> to specify different heading sizes, with <h1> being the largest and <h6> being the smallest. Styling HTML elements can be done with inline styles using the style attribute and CSS properties like background-color, color, font-family, font-size, and text-align.

Uploaded by

Emily Musembi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

HTML Heading

• A HTML heading or HTML h tag can be defined as a title or a subtitle which you
want to display on the webpage. When you place the text within the heading tags
<h1>.........</h1>, it is displayed on the browser in the bold format and size of the
text depends on the number of heading.
• There are six different HTML headings which are defined with the <h1> to <h6>
tags, from highest level h1 (main heading) to the least level h6 (least important
heading).
• h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most
important heading and h6 is used for least important.

• <h1>Heading no. 1</h1>


• <h2>Heading no. 2</h2>
• <h3>Heading no. 3</h3>
• <h4>Heading no. 4</h4>
• <h5>Heading no. 5</h5>
• <h6>Heading no. 6</h6>
Output
HTML Styles
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:

The property is a CSS property. The value is a CSS value.

• Background Color
• The CSS background-color property defines the background color for an HTML element.
• This example sets the background color for a page to powderblue:

• <body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
Text Color
The CSS color property defines the text color for an HTML element:

Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

Fonts
The CSS font-family property defines the font to be used for an HTML element:

Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

Text Size
The CSS font-size property defines the text size for an HTML element:

Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element:

Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

Summary
•Use the style attribute for styling HTML elements
•Use background-color for background color
•Use color for text colors
•Use font-family for text fonts
•Use font-size for text sizes
•Use text-align for text alignment
Table
HTML Table Example

Company Contact Country


Alfreds Futterkiste Maria Anders Germany
Centro comercial
Francisco Chang Mexico
Moctezuma
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Laughing Bacchus
Yoshi Tannamuri Canada
Winecellars
Magazzini Alimentari
Giovanni Rovelli Italy
Riuniti
Defining an HTML Table
An HTML table is defined with the <table> tag.
Each table row is defined with the <tr> tag. A table header is defined with the <th> tag.
By default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

Example
<table style="width:100%">
<tr>
<th>Firstname</th> NB:
The <td> elements are the data containers of the table.
<th>Lastname</th> They can contain all sorts of HTML elements; text, images,
<th>Age</th> lists, other tables, etc.

</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
HTML Table - Adding a Border
• If you do not specify a border for the table, it will be displayed
without borders.
• A border is set using the CSS border property:

• Example
• table, th, td {
border: 1px solid black;
}

• See next slides for a complete example


Output

• NB: Remember to define borders for both the table and the table
cells.
HTML Table - Collapsed Borders
If you want the borders to collapse into one border, add the CSS border-collapse property:

Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
Table: Adding Cell Padding
Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:

Example:
HTML Table - Left-align Headings
By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property:

Example
HTML Table - Adding Border Spacing
Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property:

Example
Note: If the table has collapsed borders, border-
spacing has no effect.
HTML Table - Cells that Span Many Columns
To make a cell span more than one column, use the colspan attribute:
HTML Table - Cells that Span Many Rows
To make a cell span more than one row, use the rowspan attribute:
HTML Table - Adding a Caption
To add a caption to a table, use the <caption> tag:
• Solution to previous question
• <!doctype html>
• <html>
• <head> That meta tag basically specifies
• <meta charset="UTF-8"> which character set a website is written with.
• <title>Delidded Web Design</title> Here is a definition of UTF-8: UTF-8 (U from
• </head> Universal Character Set + Transformation
• <body> Format—8-bit) is a character
• <a href="https://www.delidded.com">
encoding capable of encoding all possible
• <img src="https://www.delidded.com/logo.png" alt="Delidded logo">
characters (called code points) in Unicode
• </a>
• <h1>Delidded Web Design</h1>
• <p>
• Making <strong>great</strong> sites since:
• <br>
• 2018
• </p>
• <h2>Our services</h2>
• <ul>
• <li>HTML</li>
• <li>CSS</li>
• <li>And <em>Javascript</em> programming</li>
• </ul>
• </body>
• </html>
Solution
Assignment 2:
Create the following web page:

You might also like