Scribd
Upload
17 views47 pages

To HTML: UICT 2024

The document serves as an introductory guide to HTML, covering its advantages, tools, structure, elements, attributes, and various tags such as paragraphs, lists, images, and hyperlinks. It provides examples and explanations of HTML syntax, including the use of tags and attributes for formatting and structuring web content. Additionally, it discusses special characters and formatting elements, as well as the types of lists and how to create hyperlinks.

Uploaded by

Namulindwa Angella
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
17 views47 pages

To HTML: UICT 2024

The document serves as an introductory guide to HTML, covering its advantages, tools, structure, elements, attributes, and various tags such as paragraphs, lists, images, and hyperlinks. It provides examples and explanations of HTML syntax, including the use of tags and attributes for formatting and structuring web content. Additionally, it discusses special characters and formatting elements, as well as the types of lists and how to create hyperlinks.

Uploaded by

Namulindwa Angella
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 47

INTRODUCTION

TO HTML

UICT 2024
Introduction

UICT 2024
Advantages and Disadvantages of HTML

UICT 2024
HTML Tools
HTML Editor
Program one uses to create and modify HTML documents.
Examples:
 Basic needs: Notepad, TextEdit, or Notepad++.
 Advanced coding: VS Code, Sublime Text, Atom, or
Brackets.
 WYSIWYG design: Adobe Dreamweaver or BlueGriffon.
 Quick online editing: CodePen, JSFiddle, or JSBin.

Web Browser
Program one uses to read and display HTML documents. They
translate HTML encoded files into text, image, sounds and
other features user see.
Examples of web browsers include: Microsoft Internet
Explorer, Netscape, Mosaic Chrome,
UICT 2024 Edge, Firefox, safari etc
HTML Structure and Explanation
<!DOCTYPE html>  The <!DOCTYPE html>: defines
<html> that this document is an HTML5
<head> document
<title>Page Title</title>  The <html> element: is the root
</head> element of an HTML page
<body>  The <head> element: contains
meta information about the HTML
page
 The <title> element: specifies a title
</body> for the HTML page (which is shown
</html> 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,
UICT 2024
tables, lists, forms, hyperlinks etc.
HTML Elements (Tags)
 An HTML element is defined by a start tag, some content,
and an end tag.
 Syntax: <tagname> Content </tagname>
 Example: <p> My first paragraph </p>
 Note: Some HTML elements have no content (like the
<br>, hr elements). These elements are called empty
elements (tags). Empty elements do not have an end tag!
 HTML tags are not case sensitive: <P> means the same
as <p>. However, W3C recommends lowercase in HTML.

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" UICT 2024
HTML Headings
 HTML headings are titles or subtitles that you want to
display on a webpage.
 Example
 Heading 1
 Heading 2
 Heading 3
 Heading 4
 Heading 5
 Heading 6

UICT 2024
Example
<html>
<head>
<title> HEADHING </title>
</head>
<body>
<h1>HEADING 1</h1>
<h2>HEADING 2</h1>
<h3>HEADING 3</h3>
……
……..
<h6>HEADING 6</h6>
</body>
</html>
Save this as head.html or head.htm
UICT 2024
HTML PARAGRAPHS

UICT 2024
1. HTML Paragraphs
 The HTML <p> element defines a paragraph.
 A paragraph always starts on a new line, and browsers
automatically add some white space (a margin) before and
after a paragraph.
 Example:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Paragraph Attributes

title: Provides additional information about the paragraph


when you hover over it.
Example:
<p title="Additional Information">This is a title.</p>

UICT 2024
1. HTML Paragraphs
 lang: Specifies the language of the paragraph's content.
Example:
<p lang="en">This paragraph is in English.</p>
<p lang="es">Este párrafo está en español.</p>
 dir: Defines the text direction. Values can be ltr (left to right)
or rtl (right to left).
Example:
<p dir="rtl">This paragraph's text flows from right to left.</p>
 hidden: Hides the paragraph from the webpage, though it
remains in the HTML code.
Example:
<p hidden>This paragraph will not be displayed.</p>

Note: Other attributes such as style, class, id will be introduced


when discussing Cascading Style Sheets (CSS)
UICT 2024
2. HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting
a new paragraph:
Example
<p>This is<br>a paragraph<br>with line breaks.</p>
The <br> tag is an empty tag, which means that it has no end
tag
3. HTML <pre> Element

 The HTML <pre> element defines preformatted text.


 The text inside a <pre> element is displayed in a fixed-width
font (usually Courier), and it preserves both spaces and line
breaks:

UICT 2024
Example shows the use of <p>,<br> and <pre>
<html>
<head>
<title>Use of Paragraph, Line break and preformatted text Tag </title>
</head>
<body>
<p>HTML Tutorial </p>
<p> HTML stands for Hypertext Markup Language.<br>
It is used for creating web page. It is very simple <br>
and easy to learn.<br>
</p>
<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.


</pre>
</body> UICT 2024
4. Horizontal Rule Tag: <hr>
 An empty tag <HR> basically used to draw lines and
horizontal rules. It can be used to separate two sections of
text.
 Example:
<BODY>
Your horizontal rule goes here. <HR>
The rest of the text goes here.
</BODY>

Output:
Your horizontal rule goes here.

The rest of the text goes her UICT 2024


<hr> Attributes
 SIZE: Determines the thickness of the horizontal rule. The value is
given as a pixel value.
Example: <HR SIZE = "3">
 WIDTH: Specifies an exact width of HR in pixels, or a relative width
as percentage of the document width.
Example: <HR WIDTH = "50%">, horizontal rule a width a 50
percent of the page width.
 ALIGN: Set the alignment of the rule to LEFT, RIGHT and
CENTER. It is applicable if it is not equal to width of the page.
 NOSHADE: If a solid bar is required, this attribute is used; it
specifies that the horizontal rule should not be shaded at all.
 COLOR: Set the color of the Horizontal rule.
Example: <HR COLOR = "BLUE“>
Example of <HR> with its attribute:
<HR ALIGN=' 'CENTER' ' WIDTH=' '50%' ' SIZE=' '3" NOSHADE
COLOR="BLUE“>
UICT 2024
5. Marquee Tag
 This tag is used to move text horizontally across the screen.it
is mainly used to deliver a specific message to the visitor or to
scroll Ads on a page.
 Example: <marquee> hello world></marquee>

Attributes of marquee tag


 Bgcolor: Sets the background color of the marquee.
 Direction: Sets the direction in which the content
scrolls.
 left: Scrolls the content from right to left (default).
 right: Scrolls the content from left to right.
 up: Scrolls the content from bottom to top.
 down: Scrolls the content from top to bottom.
 Width and Height: This sets the width and height of the
marquee should be. Width = 300px height = 50px
 Loop: This sets how many times the marquee should 'Loop'
its text. Each trip counts as one loop. Example: loop = 2
UICT 2024
SPECIAL CHARACTERS
 There are certain special characters that can be
used while creating document such as:
 Symbols Entity
©, ®, &copy, &reg
¼, ½, ¾ &frac14, &frac12, &frac34
÷, <, >, ≤,≥ &divide, &lt, &gt, &le, &ge
& &amp
♣♠♥ &spades, &clubs, &hearts
 All these special character must be ended with a
semicolon;

UICT 2024
Example:
<PRE>
The copyright symbol is: &COPY;
The registered rank is: &REG;
</PRE>
• Output:
The copyright symbol is:©
The registered rank is:®

UICT 2024
 Formatting elements were designed to display special types
of text:

 <b> - Bold text


 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked or highlighted text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
Exercise
&copy;This web page was edited on 2nd September, 2024 by
McCarthy
19
HTML LISTS
• HTML Lists are used to specify lists of information. All lists
may contain one or more list elements.
• There are three different types of HTML lists:
1.Ordered List or Numbered List (ol)
2.Unordered List or Bulleted List (ul)
3.Description List or Definition List (dl)
HTML Ordered List or Numbered List
 In the ordered HTML lists, all the list items are marked with
numbers by default. It is known as numbered list also. The
ordered list starts with <ol> tag and the list items start with
<li> tag.
 Example
• <p>UICT Programmes</p>
• <ol>
• <li>Diploma in Computer Science</li>
• <li>Diploma in Information Technology, Business</li>
• <li>Diploma in Electrical and Engineering</li>
• <li>Diploma in Communication Engineering</li>
• </ol>
5 types of attributes in <ol> tag
Types of Ordered List or Numbered List
ol type = “I” ol type = “i”
1.<ol type="I"> 1.<ol type="i">
2. <li>HTML</li> 2. <li>HTML</li>
3. <li>Java</li> 3. <li>Java</li>
4. <li>JavaScript</li> 4. <li>JavaScript</li>
5. <li>SQL</li>
5. <li>SQL</li>
6.</ol>
6.</ol>

Output:
Output: i.HTML
I.HTML ii.Java
II.Java iii.JavaScript
III.JavaScript iv.SQL
IV.SQL
Types of Ordered List or Numbered List
ol type = “A” ol type = “a”
1.<ol type="A"> 1.<ol type="a">
2. <li>HTML</li> 2. <li>HTML</li>
3. <li>Java</li> 3. <li>Java</li>
4. <li>JavaScript</li> 4. <li>JavaScript</li>
5. <li>SQL</li>
5. <li>SQL</li>
6.</ol>
6.</ol>

Output
A. HTML Output:
B.Java a.HTML
C.JavaScript b.Java
D.SQL c.JavaScript
d.SQL
Ordered List start
attribute
 The start attribute is used with ol tag to specify from where to
start the list items.
 <ol type="1" start="5"> : It will show numeric values
starting with "5".
 <ol type="A" start="5"> : It will show capital alphabets
starting with "E".
 <ol type="a" start="5"> : It will show lower case alphabets
starting with "e".
 <ol type="I" start="5"> : It will show Roman upper case
value starting with "V".
Ordered List reversed Attribute
Example
1.<ol reversed>
2.<li>HTML</li>
3.<li>Java</li>
4.<li>JavaScript</li>
5.<li>SQL</li>
6. </ol>
HTML Unordered List | HTML Bulleted List
 HTML Unordered List or Bulleted List displays elements in
bulleted format.
 The HTML ul tag is used for the unordered list.
 There can be 4 types of bulleted list:
Examples of Unordered List
1.<ul> 1.<ul type="square">
2. <li>HTML</li> 2. <li>HTML</li>
3. <li>Java</li> 3. <li>Java</li>
4. <li>JavaScript</li> 4. <li>JavaScript</li>
5. <li>SQL</li>
5. <li>SQL</li>
6.</ul>
6.</ul>

Output:
Output:  HTML
o HTML  Java
o Java  JavaScript
o JavaScript  SQL
o SQL
 Inserting an image on a web page with <img> tag:
 As mentioned earlier, the <img> tag is an empty tag, it
contains attributes only, and dose not have a closing tag
 Image attributes:
src Specifies the path to the image file (relative or
absolute)
alt Specifies an alternate text for an image, if the
image cannot be displayed
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border

29
Example using <img> attributes
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>Alternative text</h2>
5. <p>The alt attribute should reflect the image content, so
users who cannot see the image get an understanding of
what the image contains:</p>
6. <img src="chania.jpg" alt="Flowers in Chania" width="460"
height="345">
7. </body>
8. </html>
Assignment
1.How to display images in Another Folder
2.How to display images on another
UICT 2024 server or website
HYPERLINKS: <a> TAG
 Hyperlinks allow users to navigate to different locations,
either within the same document, another document, or a
web page.
 The syntax for hyperlink is: <a href="url">link text</a>
 There are three common types of hyperlinks:
 Absolute,
 Relative,
 Bookmark.

1. Absolute Hyperlink: uses a full URL, including "http://",


not just "www.somesite.com"

UICT 2024
HYPERLINKS: <a> TAG
2. Relative hyperlink

 Points to a file or page relative to the current page.


 It doesn’t provide the full URL but instead uses a relative
path based on the location of the current file.
 Relative hyperlinks are often used for internal navigation
within a website or directory structure.
Types of Relative Hyperlinks

Same directory: Links to a file in the same folder.


<a href="contact.html">Contact</a>
Subdirectory: Links to a file in a subfolder.
<a href="services/webdesign.html">Web
Design</a>
Parent directory: Links to a file in the parent folder using ../.
UICT 2024
<a href="../index.html">Home</a>
HYPERLINKS: <a> TAG
Example of Absolute and Relative
<!DOCTYPE html>
<html>
<body>

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

</body>
</html> UICT 2024
HYPERLINKS: <a> TAG
3. Bookmark (Internal) Hyperlinks

 Also known as an anchor link


 Bookmark takes the user to a specific section within the same
document or page.
 It is used to link to headings, sections, or specific content
within a webpage or document.

Example
First, create a named anchor or ID in the HTML:
<h2 id="section1">Section 1</h2>
Then, create a hyperlink to that section:
<a href="#section1">Go to Section 1</a>
Clicking the link will scroll the page to the location marked by the
anchor #section1. UICT 2024
HYPERLINKS: <a> TAG
Conclusion
Hyperlinks are a fundamental aspect of web navigation.
Absolute links are best for external websites
Relative links for internal navigation within the same website
Bookmark links for navigating within a single page or
document.

UICT 2024
HYPERLINKS: <a> TAG
HTML Links - The target Attribute

 By default, the linked page will be displayed in the current


browser window. To change this, you must specify another
target for the link.
 The target attribute specifies where to open the linked
document.
 The target attribute can have one of the following values:
 _self - Default. Opens the document in the same window/tab as it
was clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window

UICT 2024
HYPERLINKS: <a> TAG
Example of target attribute

1. <!DOCTYPE html>
2. <html>
3. <body>
4. <h2>The target Attribute</h2>
5. <a href=https://www.w3schools.com/ target="_parent">Visit
W3Schools!</a>
6. <p>If target="_blank", the link will open in a new browser
window or tab.</p>
7. </body>
8. </html>

UICT 2024
HTML TABLES
 HTML tables allow web developers to arrange data into rows
and columns
 Some of the HTML table tags include:

UICT 2024
HTML TABLES

UICT 2024
HTML TABLES
Output

UICT 2024
HTML TABLES
Colspan attribute
Used to make a cell span over two or multiple columns.
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table> UICT 2024
HTML TABLES
Rowspan attribute

UICT 2024
HTML FORMS
 An HTML form is used to collect user input. The user input
is most often sent to a server for processing.
 Some of the common tags include:

UICT 2024
HTML FORMS
The <form> Element
The <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.

The <label> Element


The <label> tag defines a label for many form elements.
Note: The for attribute of the <label> tag should be equal to the id
attribute of the <input> element to bind them together.

UICT 2024
HTML FORMS
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending
on the type attribute.
Examples of the common input elements

The Name Attribute for <input>


Each input field must have a UICT
name 2024
attribute to be submitted.
HTML FORMS
Exercise: Design the form below:

UICT 2024
1. Introduction to HTML5; Laying out a page with HTML5,
page structure, new HTML5 structure tags, page
simplification. [3 LH 3 PH]

2. Selection and Articles; Selection tag, Article tag,


Outlining, Accessibility. [3 LH 3 PH]

3. HTML5 Audio and Video; Supported media types, Audio


element, Video element, Accessibility,

• Scripting media elements, Dealing with non- supporting


browsers. [LH = 3, PH = 3]
UICT 2024

You might also like