Scribd
Upload
26 views

003 HTML

This document provides an introduction to HTML (Hypertext Markup Language) and how it is used to structure and display content on web pages. It discusses key HTML elements such as headings, paragraphs, images, links, lists and tables. It also covers HTML tags, attributes and how to start a basic HTML document with the root <html> element and sections for the <head> and <body>.

Uploaded by

Ali Maahiiir
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
26 views

003 HTML

This document provides an introduction to HTML (Hypertext Markup Language) and how it is used to structure and display content on web pages. It discusses key HTML elements such as headings, paragraphs, images, links, lists and tables. It also covers HTML tags, attributes and how to start a basic HTML document with the root <html> element and sections for the <head> and <body>.

Uploaded by

Ali Maahiiir
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 29

FACULTY OF INFORMATION

TECHNOLOGY AND ENGINEERING

CSE 131

INTERNET AND WORLD WIDE WEB (WEB TECHNOLOGIES)

WITH

SHEIDU HALILU
[email protected]
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.


Examples of HTML Elements
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.


Examples of HTML Elements
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

You might also like