003 HTML

FACULTY OF INFORMATION
TECHNOLOGY AND ENGINEERING
CSE 131
INTERNET AND WORLD WIDE WEB (WEB TECHNOLOGIES)
WITH
SHEIDU HALILU
sheiduhalilu@lincoln.edu.ng
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

HTML elements label pieces of content such as "this is a heading", "this is
a paragraph", "this is a link", etc.
How Does HTML Works?
HTML documents are files that end with a .html extension. You can view
them using any web browser (such as Google Chrome, Safari, or Mozilla
Firefox). The browser reads the HTML file and renders its content so that
internet users can view it.
Usually, the average website includes several different HTML pages. For
instance: home pages, about pages, contact pages would all have separate
HTML documents.
...How Does HTML Work?
Each HTML page consists of a set of tags (also called elements), which you can
refer to as the building blocks of web pages. They create a hierarchy that structures
the content into sections, paragraphs, headings, and other content blocks.
Most HTML elements have an opening and a closing tag that use the <tag></tag>
syntax.
Some doesnt have a closing tag e.g <br>, <hr>, <img>, <input>
How to start a HTML document
An HTML document starts with the root element
<html> … </html>
<html>: opening tag

</html>: closing tag

Everything that you want to be displayed goes into the root element
How to start a HTML document

The contents of the HTML document are divided into two sections

<html>

<head>

</head>
Head: contains informations related
To the web page

<body>

</body> Body: contains the content you
</html> Want to display in the web page
HTML Editors
Web pages can be created and modified by using professional HTML
editors.
However, simple text editors like Notepad (PC) or TextEdit (Mac) is

recommended for a biginner

Start by a having a project folder

Write some HTML in notepad and save it with .html extension

Open the file with a browser.
The Project Folder

A website is basically a collection of different webpages linked together

This web pages are the HTML documents that you create. e.g home.html,
about.html, contact.html

The project folder serves as the website

And the web pages are the list of files that will be available in the folder

The home page is the root of a website – the first page that the website
displays. Therefore it is a convention that it is named with index.html
Example
<html>
<head>
<title>My First Website </title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Elements
An HTML element is defined by a start tag, some content, and an

end tag.
<tagname>Content goes here...</tagname>
<h1>My First Heading</h1>

<p>My first paragraph.</p>

HTML is Not Case Sensitive

<p>...</P>
Examples of HTML Elements
HTML Element Use
<html> Indicates the start and end of an HTML document.
<head> Contains metadata, such as the title of the document.
Specifies the title of the document that appears in the

<title>
browser's title bar.
Defines the body of the web page, which contains all the
<body>
visible content.
Define the headings in the document, with <h1> being the

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
most important and <h6> being the least important.
<p> Defines a paragraph of text.

HTML Element Use
<a> Creates hyperlinks to other web pages or files.
<img> Displays images on the web page.
<ul> Creates an unordered list.
<ol> Creates an ordered list.
<li> Defines the list items in both ordered and unordered lists.
<table> Creates a table on the web page.
<tr> Defines a table row.
<td> Defines a table cell.

HTML Element Use
Creates a form on the web page, which allows users to
<form>
input data.
Defines the various types of form inputs, such as text
<input>
boxes, checkboxes, and radio buttons.
<button> Creates a clickable button on the web page.
<select> Creates a dropdown list on the web page.
<option> Defines the options in a dropdown list.
<textarea> Creates a multiline text input field.

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"

<a href="https://lincoln.edu.ng/">Visit Lincoln</a>

href: is the attribute
Examples of HTML Attributes
HTML Attributes Use
Specifies the URL of the resource (such as an image or video)
src
that the element should display.
href Specifies the URL of the resource that the hyperlink should link to.
Specifies alternative text for an image element. This text is

alt displayed if the image cannot be loaded or if the user is using a
screen reader.
Specifies additional information about an element when the user
title
hovers over it.
style Specifies inline CSS styles for an element.
Specifies the type of input for form elements, such as text,

Type
checkbox, or radio.
Value Specifies the value of a form input field.

For more examples of HTML Elements and Attributes Please visti:
• Https://docs.Google.Com/document/d/1ev87bttbddbyfelg-2t_i5jzfryow-3ykd0vbbmmgta/edit?Usp=
sharing
• Devdocs API documentation
• HTML reference - A free guide to all HTML elements and attributes.
• Web technology for developers | mdn (mozilla.Org)
• W3schools online web tutorials

HTML headings
are titles or subtitles that you want to display on a webpage.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
HTML Paragraphs
A paragraph always starts on a new line, and is usually a block of text.

It removes white spaces
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Preformatted Text <pre></pre>

Is similar to paragraph. The only diffrence is that it preserves white
spaces
<pre>Hello World</pre>
Horizontal rules(hr) and break(br)
<hr>: is used to draw a horizontal line
<br>: is used to break a line
<p>This is <br> a <br> ball </p>

Image
<img src="img_chania.jpg">
<img src= “https://example.com/img/tree.png”>

Image can be sourced from your PC or from another server using its url
Additional attributes can be applied
<img src= “tree.png” alt= “Tree” height= “80px” width= “100px”>

Link <a></a>

the link tag can be used to take you to another page
in the web

It can be used to navigate between webpages of a
website

<a href= “https://lincoln.edu.ng”>visit lincoln</a>

<a href = “about.html” >About Us</a>
LIST

Unordered lists: shows lists with bullets

Ordered lists: shows a numbered lists
Unordered list
<ul>
<li>Coffee</li> 
Coffee
<li>Tea</li> 
Tea
<li>Milk</li> 
Milk
</ul>
… LIST

Ordered lists: shows a numbered lists
ordered list
<ol>
<li>Coffee</li>
<li>Tea</li>
1. Coffee
<li>Milk</li>
2. Tea
</ol>
3. Milk
TABLE
A table is a structured set of data made up of rows and columns (tabular data). A table
allows you to quickly and easily look up values that indicate some kind of connection
between different types of data, for example a person and their age, or a day of the week, or
the timetable for a local swimming pool.
Table is represented with

<table></table>: for the whole table

<tr></tr>: for a row ordered
in tablelist

<th></th>: for table headings

<td></td>: for the table cells and data
...TABLE
<tr> <th> <th> <th>
<tr> <td>ordered list <td> <td>
<tr> <td> <td> <td>
<tr> <td> <td> <td>
<table>
...TABLE <tr>
<th>Firstname</th>
• HTML Tables (w3schools.com)
<th>Lastname</th>
• <table> element - HTML <th>Age</th>
Reference </tr>
• HTML table basics - Learn web de <tr>
<td>Jill</td>
velopment | MDN (mozilla.org)ordered list
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
THANK YOU

003 HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

003 HTML

Uploaded by

Copyright:

Available Formats

FACULTY OF INFORMATION

TECHNOLOGY AND ENGINEERING

INTERNET AND WORLD WIDE WEB (WEB TECHNOLOGIES)

<html>: opening tag

However, simple text editors like Notepad (PC) or TextEdit (Mac) is

An HTML element is defined by a start tag, some content, and an

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

<h1>My First Heading</h1>

<head> Contains metadata, such as the title of the document.

Specifies the title of the document that appears in the

Define the headings in the document, with <h1> being the

<p> Defines a paragraph of text.

<img> Displays images on the web page.

<ul> Creates an unordered list.

<ol> Creates an ordered list.

<table> Creates a table on the web page.

<tr> Defines a table row.

<td> Defines a table cell.

<button> Creates a clickable button on the web page.

<select> Creates a dropdown list on the web page.

<option> Defines the options in a dropdown list.

<textarea> Creates a multiline text input field.

Specifies alternative text for an image element. This text is

style Specifies inline CSS styles for an element.

Specifies the type of input for form elements, such as text,

Value Specifies the value of a form input field.

• Devdocs API documentation

• HTML reference - A free guide to all HTML elements and attributes.

• Web technology for developers | mdn (mozilla.Org)

• W3schools online web tutorials

are titles or subtitles that you want to display on a webpage.

A paragraph always starts on a new line, and is usually a block of text.

Preformatted Text <pre></pre>

<hr>: is used to draw a horizontal line

<br>: is used to break a line

<p>This is <br> a <br> ball </p>

<img src= “https://example.com/img/tree.png”>

Additional attributes can be applied

<img src= “tree.png” alt= “Tree” height= “80px” width= “100px”>

You might also like