Scribd
Upload
48 views

Introduction To HTML

Uploaded by

harrisonnwoti
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
48 views

Introduction To HTML

Uploaded by

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

INTRODUCTION

TO
HTML

5 Presenter: Stanley
• W H AT IS H T M L ? • WHY LEARN H T M L ?
HTML stands for Hyper Text It is essential to learn HTML if you
Markup Language, it is easy and want to build web sites, you can’t
fun to learn. HTML describes the build one if you don’t know HTML
structure of web pages. HTML5 is because it’s one the prerequisites
the fifth and current major version in learning other languages used
of the HTML standard. for web development.
• HTML TAGS
HTML Tags are elements names surrounded by angle brackets. In HTML we start and end
tags. Look at the example below.

<p> H e l l o , w e l c o m e t o L e a r n H T M L . </p>

• Where can I edit or create HTML files ? • VIM


In a text editor! Look at the list below for some free • ATOM
apps you could use to edit or create HTML files. • Visual Studio Code
• Notepad • Brackets
• Notepad++ • TextEdit
• Sublime Text Editor • Dcoder (Android app) etc.
• Saving HTML Files
You need to save your HTML files with the .html file extension. For example, mywebpage.html
If you don’t save your files with .html file extension, you won’t be able to run it on browsers.

• HTML Elements
An HTML element is usually composed of an opening tag, Element Content and a closing tag.
• Opening tag: <h1>
• Element content: Learning HTML
• Closing tag: </h1>

<h1> L e a r n i n g H T M L . </h1>
• Nested HTML Elements
There are some cases that an HTML element can contain one or more HTML elements.
Example:
<p><i> I t a l i c i z e d t e x t </i></p>

• Empty Elements
Empty elements are without any element content and an end tag. Some commonly used
empty elements are:
• <meta />
• <link />
• <img />
• <br />
• <hr />
• <input />
HTML ATTRIBUTES <!DOCTYPE html>
HTML attributes are used to add more <html lang=“en-US”>
information to an HTML Element. <a href=“html-class.html”> Go to html class </a>
• HTML attributes are found in <a href=“#link” title=“Click me”> Link </a>
HTML tags. <p style=“font-size: 40px; color: gold”> A text with
font of 40 pixels and golden color </p>
• HTML attributes only appear at
start tags. <div class=“name”>
<!---some content goes here--->
• HTML elements can have multiple
attributes </div>
<div id=“name”>
• HTML attributes are composed of
name/value pairs. Example: <!---some content goes here--->
attributename=“value” </div>

Other Examples:→ </html>


• HTML Responsiveness
To make an HTML page responsive simply add this inside the <head> element. <meta
name=“viewport” content=“device-width, initial-scale=1” />
It’s important to make pages responsive to properly display content on different screen
sizes especially on smaller screens.
• HTML5 BASIC EXAMPLE
A very simple HTML page layout will compose of the following:
• Basic structure of any HTML file.
• A header.
• A simple navigation bar.
• An image.
• A footer.
Simple illustration
<!DOCTYPE html> <a href=“#link” > PRIVATE POLICY </a>
<html> </p>
<head> </nav>
<meta name=“viewport” content=“device-width, initial- </header>
scale=1” />
<br/>
<title> My First HTML Class </title>
<hr/>
</head>
<main>
<body>
<img src=“bell-image.jpg” alt=“image” />
<header>
<p> This is the best ICT platform for your learning. </p>
<nav style=“display: inline-block” >
</main>
<h1> My First HTML Class </h1>
<footer>
<p>
<h2> Copyright @ Signor 2021. </h2>
<a href=“#link” > HOME</a>
</footer>
<a href=“#link” > CLASSES </a>
</body>
<a href=“#link” > TEACHERS</a>
</html>
<a href=“#link” > TERMS & CONDITIONS </a>
• HTML Headings
• HTML Paragraphs • HTML Links
HTML Heading usually contain a
title or a main topic of a certain HTML paragraphs are HTML Links are very
content. necessary for all web pages.
mainly used to group HTML links are hyperlinks.
HTML Headings are block-level sentences.
elements. Links help users jump from
The <p> element defines their current web page location
Example: HTML paragraphs. to another.
<h1> Heading 1 </h1> HTML paragraphs are To make HTML links we need
to use the <a> element with the
<h2> Heading 2 </h2> block-level elements.
href attribute that specifies a
<h3> Heading 3 </h3> URL to a page.
Example:
<h4> Heading 4 </h4>
Examples:
<h5> Heading 5 </h5> <p> This is an HTML
Internal Linking Example
<h6> Heading 6 </h6>
paragraph </p>
<a href=“file-in-the-same-folder.html”>
Example </a>

NOTE! You can only use tags External Linking Example

from <h1> to <h6> <a href=“https://www.wikipedia.org”>


Wikipedia </a>
Opening Link in a New Tab
<a href=“https://www.wikipedia.org”
target=“_blank”> Wikipedia </a>
• HTML Text Formatting
Formatting text is very essential for web sites because it aids readers to know the
important parts of a web content easily.
Elements for Formatting Text – below are inline elements
• <b> : bolds a text
• <i> : italicize a text
• <u> : underlines a text
• <code> : defines a text as a code
• <tt> : typewriter text
• <small> : makes a text smaller
• <em> : emphasizes a text, may be italicized depending on the browser
• <strong> : emphasizes a text, may be boldened depending on the browser
• <mark> : marks a text like highlighting pen
• <q> : enquotes a text
• <s> : strikes through a text
• HTML5 Sections
HTML sections group different HTML elements. Creating sections is essential for organizing and
styling web contents.
• Elements Used For HTML Sections
<div> : used to group large group of HTML elements like navigation, header, main content,
footer, images; it is a block-level element.
<span> : used to group smaller group of text in a paragraph and few HTML elements; it is an
inline element.
• HTML5 Semantic Elements
<nav> : defines a navigation list or bar
<header> : defines a header
<main> : defines the main content
<footer> : defines a footer
Using HTML semantic elements helps both in Search Engine Optimization and in making codes
more understandable
• HTML Tables
HTML tables represents data in a tabular form. It is composed of columns and rows of cells that contain
data. The <table> element defines an HTML Table.
• HTML Table Elements
<thead> : defines a table header
<tbody> : defines a table body
<tfoot> : defines a table footer
<tr> : defines a table row
colspan attribute: defines how many columns should a cell span
<th> : defines a table heading
<td> : defines a table data/cell
rowspan attribute: defines how many rows should a cell span; also works in <th>
<colgroup> : specifies a group of one or more columns in the table
<col> : specifies column properties for each column in a colgroup (empty element)
<caption> : defines a caption for a table
HTML Table Attributes
• align : defines the alignment of a table Simple Example: <td> Dela Cruz </td>
• bgcolor: defines the background color of a <table> </tr>
table.
<thead> </tbody>
• border: defines the size of the frame
surrounding a table. <tr> <tfoot>
• cellpadding: defines the space between the <th> First Name <tr>
content of a cell and its border
</th>
<td> Footer </td>
• cellspacing: defines the space between two
cells. <th> Last Name
<td> Footer </td>
</th>
• frame: defines which side of the frame </tr>
surrounding the table should be displayed. </tr>
</tfoot>
• rules: defines where rules should appear in a </thead>
table. </table>
<tbody>
• summary: defines an alternative text that
summarises the content of the table. <tr>
• width: defines the width of a table <td> Juan </td>
• HTML Images
The img tag is used to put an image in an HTML document and it looks like this:
<img src=“badge1.gif” width=“120” height=“90” alt=“image”/>
HTML Lists
When we want to use a list on a website, HTML provides three different types to
choose from: Unordered, Ordered, and Description lists.
• Unordered List
Creating an unordered list in HTML is accomplished using the unordered list
block-level element.
<ul>
<li> Orange </li>
<li> Green </li>
<li> Blue </li>
</ul>
• Ordered List
The main difference between an ordered list and an unordered list is that
instead of using a dot /bullets as the default list item marker, an ordered
list uses numbers.

<ol>
<li> Orange </li>
<li> Green </li>
<li> Blue </li>
</ol>

• Ordered List Attributes


The ordered list has an attribute called type. The type attribute can be
used in the following ways:
• Ordered List Attributes
• type=“1” The list items will be numbered with numbers (default)

• type=“A” The list items will be numbered with uppercase letters

• type="a“ The list items will be numbered with lowercase letters

• type="I“ The list items will be numbered with uppercase roman


numbers

• type="i“ The list items will be numbered with lowercase roman


numbers
• HTML Form Element
Forms are used to collect data entered by a user. They tend to be used in
conjunction with a programming language to process its data. So a form
element will look something like this:
<form action="processingscript.php" method="post">…</form>
<form>….</form> Defines the form and within this tag are attributes
like:
action=“processingscript.php” - An action attribute is needed to tell
where the contents of a form will be sent to for onward processing.
method="post" - The method attribute borders on how the data in the
form will be sent and it can have the value get, post and select.
• HTML Form Element
Simple Example:
<form action="processingscript.php" method="post">
<label for=“firstname”> First name </label><br>
<input type="text" name="firstname" value="Mickey”/>
<br>
<label for=“lastname”> Last name </label><br>
<input type="text" name="lastname" value="Mouse” />
<br><br>
<input type="submit” name=“submit” />
</form>
• HTML Form Element
<textarea> Defines a multiline input control (text area).
<select> Defines a drop-down list.
<option> Defines an option in a drop-down list.
<label> Defines a label for an <input> element.
<input> Defines an input control.
<keygen> Defines a key-pair generator field (for forms).
<fieldset> Groups related elements in a form.
<optgroup> Defines a group of related options in a drop-down list.
• HTML Buttons
An HTML Button is a clickable element that can be used in HTML Forms or
anywhere in a document that needs a standard button functionality. The <button>
element defines an HTML Button.
• Button Attribute Types
“submit” – Default value which submits a form.
“button” – It removes the default behavior of a button.
“reset” – It resets the form controls their initial value.
<form action="processingscript.php" method="post">
<button type=“reset”> Reset Form </button>
<button type="submit”> Submit Form </button>
<button type=“button” disabled> Button Disabled </button>
</form>
• HTML Media Element
To embed an audio or video in HTML we have to use the <audio> or
<video> element with its src attribute or the <source> child element with
its src and type attribute for each.

<audio> Audio: Defines sound content, for adding sounds.


<video> Video: Defines a video or movie.
<track> Track: Defines text tracks for media elements (<video>
and <audio>).
<source> Defines multiple media resources for media elements
(<video> and <audio>).
• Other HTML Tags
Ta g s Descriptions
<!--...--> Defines a comment
<!DOCTYPE> Defines the document type
<a> Defines a hyperlink
<abbr> Defines an abbreviation or an acronym
Not supported in HTML5. Use <abbr> instead.
<acronym>
Defines an acronym

<address> Defines contact information for the author/owner of a document

Not supported in HTML5. Use <embed> or <object> instead.


<applet>
Defines an embedded applet

<area> Defines an area inside an image-map


<article> Defines an article
• Other HTML Tags
<aside> Defines content aside from the page content
<audio> Defines sound content
<b> Defines bold text

<base> Specifies the base URL/target for all relative URLs in a document

Not supported in HTML5. Use CSS instead.


<basefont>
Specifies a default color, size, and font for all text in a document

Isolates a part of text that might be formatted in a different direction from


<bdi>
other text outside it
<bdo> Overrides the current text direction
Not supported in HTML5. Use CSS instead.
<big>
Defines big text
<blockquote> Defines a section that is quoted from another source
• Other HTML Tags
<body> Defines the document's body
<br> Defines a single line break
<button> Defines a clickable button

<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)

<caption> Defines a table caption


Not supported in HTML5. Use CSS instead.
<center>
Defines centered text
<cite> Defines the title of a work
<code> Defines a piece of computer code
Specifies column properties for each column within a <colgroup>
<col>
element

<colgroup> Specifies a group of one or more columns in a table for formatting


• Other HTML Tags
<datalist> Specifies a list of pre-defined options for input controls

<dd> Defines a description/value of a term in a description list


<del> Defines text that has been deleted from a document
<details> Defines additional details that the user can view or hide
<dfn> Represents the defining instance of a term
<dialog> Defines a dialog box or window
Not supported in HTML5. Use <ul> instead.
<dir>
Defines a directory list
<div> Defines a section in a document
<dl> Defines a description list
<dt> Defines a term/name in a description list
<em> Defines emphasized text
• Other HTML Tags
<embed> Defines a container for an external (non-HTML) application

<fieldset> Groups related elements in a form


<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content
Not supported in HTML5. Use CSS instead.
<font>
Defines font, color, and size for text
<footer> Defines a footer for a document or section
<form> Defines an HTML form for user input
Not supported in HTML5.
<frame>
Defines a window (a frame) in a frameset

Not supported in HTML5.


<frameset>
Defines a set of frames
<h1> to <h6> Defines HTML headings
• Other HTML Tags
<head> Defines information about the document
<header> Defines a header for a document or section
<hr> Defines a thematic change in the content
<html> Defines the root of an HTML document
<i> Defines a part of text in an alternate voice or mood
<iframe> Defines an inline frame
<img> Defines an image
<input> Defines an input control
<ins> Defines a text that has been inserted into a document
<kbd> Defines keyboard input
<label> Defines a label for an <input> element
<legend> Defines a caption for a <fieldset> element
• Other HTML Tags
<li> Defines a list item
Defines the relationship between a document and an external resource
<link>
(most used to link to style sheets)
<main> Specifies the main content of a document
<map> Defines a client-side image-map
<mark> Defines marked/highlighted text
<menu> Defines a list/menu of commands
Defines a command/menu item that the user can invoke from a popup
<menuitem>
menu
<meta> Defines metadata about an HTML document
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
Not supported in HTML5.
<noframes>
Defines an alternate content for users that do not support frames
• Other HTML Tags
Defines an alternate content for users that do not support client-side
<noscript>
scripts
<object> Defines an embedded object
<ol> Defines an ordered list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<output> Defines the result of a calculation
<p> Defines a paragraph
<param> Defines a parameter for an object
<picture> Defines a container for multiple image resources
<pre> Defines preformatted text
<progress> Represents the progress of a task
<q> Defines a short quotation
• Other HTML Tags
Defines what to show in browsers that do not support ruby
<rp>
annotations
Defines an explanation/pronunciation of characters (for East Asian
<rt>
typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<s> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<script> Defines a client-side script
<section> Defines a section in a document
<select> Defines a drop-down list
<small> Defines smaller text
Defines multiple media resources for media elements (<video> and
<source>
<audio>)
<span> Defines a section in a document
• Other HTML Tags
Not supported in HTML5. Use <del> or <s> instead.
<strike>
Defines strikethrough text
<strong> Defines important text
<style> Defines style information for a document
<sub> Defines subscripted text
<summary> Defines a visible heading for a <details> element
<sup> Defines superscripted text
<svg> Defines a container for SVG graphics
<table> Defines a table
<tbody> Groups the body content in a table
<td> Defines a cell in a table
<template> Defines a template
<textarea> Defines a multiline input control (text area)
• Other HTML Tags
<tfoot> Groups the footer content in a table
<th> Defines a header cell in a table
<thead> Groups the header content in a table
<time> Defines a date/time
<title> Defines a title for the document
<tr> Defines a row in a table
<track> Defines text tracks for media elements (<video> and <audio>)

<tt> Not supported in HTML5. Use CSS instead. Defines teletype text

<u> Defines text that should be stylistically different from normal text
<ul> Defines an unordered list
<var> Defines a variable
<video> Defines a video or movie
<wbr> Defines a possible line-break
QUESTIONS
AND
ANSWERS

You might also like