Scribd
Upload
20 views

HTML LAB Topics

HTML LAB Topics to practicing

Uploaded by

nat yesu
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
20 views

HTML LAB Topics

HTML LAB Topics to practicing

Uploaded by

nat yesu
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 78

Introduction to HTML

Lab Topics
Learning outcomes
See how HTML describes the structure of a web page

Learn how tags or elements are added to your document

Explore basic HTML elements such as

<h1>, <img>, <p>, <figure>, <table>, <form>

Explore the use of Chrome DevTool - Inspect


Exercise
Create a web page named “index.html” and insert the basic html
document elements
Structural Markups
The elements that you can use to describe both headings and
paragraphs
Headings: HTML Code
<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>,
<h6></h6>
Headings: Browser Output
Paragraphs: HTML Code
<p></p>
Paragraphs: Browser Output
Superscript and Subscript
<sup></sup>, <sub></sub>
Whitespace : HTML Code
Whitespace : Browser Output
Line break
<br />
Horizontal Rules
<hr />
Semantic markup
provides extra information; such as

where emphasis is placed in a sentence,

something you have written is a quotation (and who said it),

the meaning of acronyms, and so on

are not intended to affect the structure of your web pages


Strong
<strong></strong>
Emphasis
<em></em>
Quotations: HTML Code
<blockquote></blockquote>
Quotations: Displayed on Browser
Quotations
The <blockquote> element is used for longer quotes that take up an
entire paragraph

The <q> element is used for shorter quotes that sit within a paragraph
Abbreviations: HTML Code
<abbr></abbr>
Abbreviations: Browser Output
Author Details
<address></address>
Lists
Ordered lists

are lists where each item in the list is numbered

Unordered lists

are lists that begin with a bullet point

Definition lists

are made up of a set of terms along with the definitions for each of
those terms
Ordered Lists
<ol>
<li></li>
</ol>
Unordered List
<ul>
<li></li>
</ul>
Definition Lists: HTML Code
<dl>
<dt></dt>
<dd></dd>
</dl>
Definition Lists: Displayed on Browser
Nested Lists
Links
You will commonly come across the following types of links:
● Links from one website to another
● Links from one page to another on the same website
● Links from one part of a web page to another part of the same page
● Links that open in a new browser window
● Links that start up your email program and address a new email to
someone
Links
Links are created using the <a> element

Users can click on anything between the opening <a> tag and the
closing </a> tag

You specify which page you want to link to using the href attribute
Linking to other sites
<a></a>
Linking to other pages on same site
Email Links
Opening Links in a new window/tab
target attribute, its value should be _blank
Linking to a Specific Part of the Same Page: HTML Code
Linking to a Specific
Part of the Same
Page:
Browser Output
Images
Include an image in your web pages using HTML

Show an image at the right size


Image
<img />
Height and Width of Image
Figure and Figure Caption
<figure>, <figcaption>
Tables
When representing information in a table, you need to think in terms of
a grid made up of rows and columns

Use the four key elements for creating tables

Represent complex data using tables

Add captions to tables


Tables: HTML Code
<table>
<tr>
<td></td>
</tr>
</table>
Table Headings
Spanning Columns
Spanning Rows
Long Table

<thead></thead>
<tbody></tbody>
</tfoot></tfoot>
FORMS
Form Controls
There are several types of form controls that

Text Input, Password Input, Text Area

Radio Button, Checkboxes, Dropdown Boxes

Submit Button, Image Button, File Upload


Form Structure
Form Structure
<form></form>

Form controls live inside a <form> element

action attribute

Its value is the URL for the page on the server that will receive the
information in the form when it is submitted

method attribute

Forms can be sent using one of two methods: get or post


Text Input Form Control
Password Input Form Control
Textarea Form Control
Radio Button Form Control
Checkbox Form Control
Drop Down List Form Control
Multiple Select Box: HTML Code
Multiple Select Box: Browser Output
File Input Form Control
Submit Button Form Control
Image Button Form Control
Button and Hidden Form Controls
Date Input Control
Email Input Control
Labeling Form Controls
Grouping Form Elements
Form Validation
Comments in HTML: HTML Code
<!-- -->
Comments in HTML: Browser Output
Id Attribute
Every HTML element can carry the id attribute

It is used to uniquely identify that element from other elements on the


page
Class Attribute
Every HTML element can also carry a class attribute

Rather than uniquely identifying one element within a document, it will


identify several elements as being different from the other elements on
the page
Class Attribute
Block Elements
Block level elements will always appear to start on a new line in the
browser window

Examples of block elements are <h1> , <p> , <ul> , and <li> .


Block Elements
Inline Elements
Inline elements will always appear to continue on the same line as their
neighbouring elements

Examples of inline elements are <a> , <b> , <em> , and <img>


Inline Elements
HTML Elements Reference
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
Inspecting Pages
You can use Chrome’s Inspect tool to inspect how pages are built

Right click on anywhere on a page you want to inspect, then select


Inspect option

You might also like