Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
43 views

HTML Course

HTML is the standard markup language used to create web pages. It uses tags to define elements like headings, paragraphs, lists, links, images and more. Elements are composed of opening and closing tags that can contain text and other elements. Common elements include <h1> for main headings, <p> for paragraphs, <ul> for unordered lists, <a> for links, <img> for images, and <table> for arranging content in a table with rows and cells. Forms are created using <form> and include input elements like text fields, radio buttons, checkboxes and submit buttons to collect user input. HTML can also embed videos using the <video> tag and audio using the <audio>

Uploaded by

Abdisamad Muse
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
43 views

HTML Course

HTML is the standard markup language used to create web pages. It uses tags to define elements like headings, paragraphs, lists, links, images and more. Elements are composed of opening and closing tags that can contain text and other elements. Common elements include <h1> for main headings, <p> for paragraphs, <ul> for unordered lists, <a> for links, <img> for images, and <table> for arranging content in a table with rows and cells. Forms are created using <form> and include input elements like text fields, radio buttons, checkboxes and submit buttons to collect user input. HTML can also embed videos using the <video> tag and audio using the <audio>

Uploaded by

Abdisamad Muse
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

What is HTML?

● HTML stands for Hyper Text Markup Language


● HTML is the standard markup language for creating Web pages
● HTML describes the structure of a Web page
● HTML consists of a series of elements
● HTML elements tell the browser how to display the content

Example Explained

● The <!DOCTYPE html> declaration defines that this document is an HTML5 document
● The <html> element is the root element of an HTML page
● The <head> element contains meta information about the HTML page
● The <title> element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab)
● The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
● The <h1> element defines a large heading
● The <p> element defines a paragraph
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>


<p>My first paragraph.</p>
HTML Text Formatting

HTML contains several elements for defining text with a special meaning.
HTML Formatting Elements

Formatting elements were designed to display special types of text:

● <b> - Bold text


● <strong> - Important text
● <i> - Italic text
● <em> - Emphasized text
● <mark> - Marked text
● <small> - Smaller text
● <del> - Deleted text
● <ins> - Inserted text
● <sub> - Subscript text
● <sup> - Superscript text

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:
HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

HTML Lists
HTML lists allow web developers to group a set of related items in lists.

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li>
tag.

The list items will be marked with bullets (small black circles) by default:
Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name),
and the <dd> tag describes each term:
HTML Links

HTML links are defined with the <a> tag:

The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

Nested HTML Elements

HTML elements can be nested (this means that elements can contain other elements).

All HTML documents consist of nested HTML elements.

The following example contains four HTML elements (<html>, <body>, <h1> and <p>):

HTML Attributes
HTML attributes provide additional information about HTML elements.

HTML Attributes

● All HTML elements can have attributes


● Attributes provide additional information about elements
● Attributes are always specified in the start tag
● Attributes usually come in name/value pairs like: name="value"

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes
to:

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path
to the image to be displayed:

The width and height Attributes

The <img> tag should also contain the width and height attributes, which specify the width and
height of the image (in pixels):

The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an image, if the image
for some reason cannot be displayed. This can be due to a slow connection, or an error in the src
attribute, or if the user uses a screen reader.

The style Attribute

The style attribute is used to add styles to an element, such as color, font, size, and more.

HTML Tables
HTML tables allow web developers to arrange data into rows and columns.

Define an HTML Table

A table in HTML consists of table cells inside rows and columns.


Table Cells

Each table cell is defined by a <td> and a </td> tag.

td stands for table data

Table Rows

Each table row starts with a <tr> and ends with a </tr> tag.

tr stands for table row

You can have as many rows as you like in a table; just make sure that the number of cells are the
same in each row.

Table Headers

Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of
the <td> tag:
th stands for table header

HTML tables can have cells that span over multiple rows and/or columns.
HTML Table - Colspan

To make a cell span over multiple columns, use the colspan attribute:

HTML Table - Rowspan

To make a cell span over multiple rows, use the rowspan attribute:
HTML Form
An HTML form is used to collect user input. The user input is most often sent to a server for
processing.

The <form> Element

The HTML <form> element is used to create an HTML form for user input:

The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.
Text Fields

The <input type="text"> defines a single-line input field for text input.

This is how the HTML code above will be displayed in a browser:


The <label> Element

Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-reader will read out
loud the label when the user focuses on the input element.

The <label> element also helps users who have difficulty clicking on very small regions (such as
radio buttons or checkboxes) - because when the user clicks the text within the <label> element,
it toggles the radio button/checkbox.

Radio Buttons

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.


This is how the HTML code above will be displayed in a browser:

Checkboxes

The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

This is how the HTML code above will be displayed in a browser:

The Submit Button

The <input type="submit"> defines a button for submitting the form data to a form-handler.

The form-handler is typically a file on the server with a script for processing input data.

The form-handler is specified in the form's action attribute.


This is how the HTML code above will be displayed in a browser:

HTML Video

The HTML <video> element is used to show a video on a web page.

The HTML <video> Element

To show a video in HTML, use the <video> element:


This is how the HTML code above will be displayed in a browser:

How it Works

The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and width are not set, the
page might flicker while the video loads.

The <source> element allows you to specify alternative video files which the browser may
choose from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in browsers that do not
support the <video> element.

HTML <video> Autoplay

To start a video automatically, use the autoplay attribute:


HTML Audio

The HTML <audio> element is used to play an audio file on a web page.

The HTML <audio> Element

To play an audio file in HTML, use the <audio> element:

This is how the HTML code above will be displayed in a browser:

HTML Audio - How It Works

The controls attribute adds audio controls, like play, pause, and volume.

The <source> element allows you to specify alternative audio files which the browser may
choose from. The browser will use the first recognized format.

The text between the <audio> and </audio> tags will only be displayed in browsers that do not
support the <audio> element

HTML <audio> Autoplay

To start an audio file automatically, use the autoplay attribute:


HTML Table Structure Layout
After we have learned HTML elements we will build a mini website based on HTML table as
shown below.

You might also like