Scribd
Upload
3 views

HTML Course

HTML Course

Uploaded by

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

HTML Course

HTML Course

Uploaded by

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

1

Definition
“HTML is a language that defines
basic structure of a website.”

Note:
In order to learn how to write web pages, it is
very important to understand how to structure
document.
2
In this class you will learn:

• How HTML describe the structure of a webpage


• How tags or elements are added to your document
• How to write your first webpage

3
Elements
The HTML code is made up of characters that live inside
the angled bracket.

• Elements are usually made up of two tags:


An opening tag A closing tag

<p> </p>
• The Closing tag has an extra forward slash in it.
• Each HTML element tells the browser something about
the information that sits between its opening and
closing tag.
4
Opening tag

Character

Note:
• The characters in the brackets

<p>
indicate the tag purpose.
For example:
In this tag the p stands for
paragraph.

Left-Angle Bracket Right-Angle Bracket


(Less than sign) (More than sign)
5
Closing tag

Character

Note:
• The Closing tag has a forward

</p>
slash after the < symbols.

Left-Angle Bracket Right-Angle Bracket


(Less than sign) (More than sign)
6

Forward Slash
Opening tag Closing tag

<p> Content
</p>
Element

Note:
• We can say tag = element,
but actually element is tags + its full content.
7
Basic Structure of HTML
html
head

body

8
Another example of HTML Structure

9
Body, Head and Title
<body> </body>
Everything inside this element is shown inside
the main browser window.

<head> </head>
This contains information about the page.

<title> </title>
The content of this element are shown in the
tab of the browser. 10
Tab Main Browser Window

Everything inside body element will be shown inside this main browser window.

11
12
You will learn about:

• Structural Markup: the elements that you can use to


describe both headings and paragraphs

• Semantic Markup: which provides extra information;

such as, where emphasis is placed in a sentence, that


something you have written in a quotation and so on

13
Headings

• HTML has six levels of heading.

<h1> • <h1> is used for main heading.


<h2> • <h2> is used for subheading.
<h3>
<h4> If there are further sections under the
subheadings then the <h3> element is
<h5> used, and so on...
<h6>

14
Headings

code result

15
Paragraphs
To create a paragraph, surround the words that make
up the paragraph with an opening <p> tag and closing
</p> tag.
<p>
code

result

16
Bold
By enclosing words in the tags <b> and </b> we can
make characters appear bold.

<b>
code

17
Bold
result

<b>

18
Italic
By enclosing words in the tags <i> and </i> we can
make characters appear italic.

<i>
code

19
Italic
result

<i>

20
Superscript & Subscript
Superscript: The <sup> element is used to contain characters
that should be superscript such as the suffixes of dates or
mathematical concepts like raising a number to a power such as
22. <sup>
example 12th E = mC2
Subscript: The <sub> element is used to contain characters
<sub>
that should be subscript. It is commonly used with foot notes or
chemical formulas such as H20.

example CO2 H2O


21
Superscript & Subscript

<sup>
<sub>

22
Self Closing Tags
Line Breaks & Horizontal Rules

if you wanted to add a line break inside the middle of a paragraph


you can use the line break tag <br/>. <br/>
To create a break between themes — such as a change of topic in a
book or a new scene in a play — you can add a horizontal rule
between sections using the <hr/> tag.
<hr/>

23
Self Closing Tags
Line Breaks & Horizontal Rules

<br/>
<hr/>

Self Closing Tags can work without forward slash.


There are more Self Closing Tags, we will discuss on later chapters. 24
Strong & Emphasis

The use of <strong> element indicates that its content has strong
importance. <strong>
The <em> element indicates emphasis that subtly changes the
meaning of a sentence.
<em>

25
Strong & Emphasis

<strong>
<em>

26
27
Lists
There are lots of occasions when we need to use lists.
HTML provides us with three different types:

1 Ordered

2 Unordered

3 Definition

28
Lists

Ordered list: Ordered list are lists where each item in the list
is numbered.

Unordered list: Unordered list are lists that begins with a


bullet point.

Definition list: Definition list are made up of a set of terms


along with the definitions for each of those terms.

29
Ordered lists

The ordered list is created with the <ol> element.


<ol>
Each item in the list is placed between an opening <li> tag and a
closing </li> tag. (The li stands for list item.)
<li>
Note:
we can use alphabets, no's, or roman letters for ordered lists, by
default we use numbers, if we want to change the default option
we can use attribute for this.

30
Ordered lists

<ol>
<li>

31
Unordered lists

The unordered list is created with the <ul> element.


<ul>
Each item in the list is placed between an opening <li> tag and a
closing </li> tag. (The li stands for list item.)
<li>
Note:
we can change bullet into circle, square, disc and so on by using
attribute.

32
Unordered lists

<ul>
<li>

33
Definition lists

The definition list is created with the <dl> element and usually
consist of a series of terms and their definitions.
Inside the <dl> element you will usually see pairs of <dt> and <dd>
<dl>
elements.

<dt> is used to contain the term being defined (the definition term) <dt>
<dd> is used to contain the definition.

<dd>
34
Definition lists

<dl>
<dt>
<dd>
35
Nested lists
You can use a second list inside an <li> element to create a sub-list
or nested list.

36
Attribute
Attribute provides additional information about the content of an
element.

They appear on the opening tag of the element and are made up
of two parts: a name and a value, separated by an equals sign.

Attribute Attribute
name value

<ol type = “ A ” >


<li> HTML </li>
</ol>
37
38
Links

Definition
Links are the defining feature of the web because they allow you
to move from one web page to another. <a>
You will commonly come across the following type of links:

• Links from one website to another.


• Links from one page to another on the same website.
• Links that open in a new browser window.

39
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.
<a>
example
<a href= “# ” > Google</a>

40
Linking to other site

When you link to a different website, the value of the href


attribute will be the full web address for the site which is known as
an absolute URL.
<a>
example

<a href= “https://www.google.com ” > Google</a>

41
Linking to other pages on the same site

When you linking to other pages within the same site, you do not
need to specify the domain name in the URL.

If all the pages of the site are in the same folder, then the value of
<a>
the href attribute is just the name of the file.

example

<a href= “About.html” > About</a>

42
Linking to other pages on the same site
Directory Structure

Link Type Example


<a>
Same Folder <a href= “About.html” > About</a>

Child Folder <a href= “page/About.html” > About</a>

Grandchild
<a href= “links/page/About.html” > About</a>
Folder

Parent Folder <a href= “../About.html” > About</a>

Grandparent
<a href= “../../About.html” > About</a>
Folder
43
Opening links in a new window

If you want a link open in a new window, you can use the target
attribute on the opening <a> tag. The value of this attribute should
be _blank.
<a>
example

<a href= “About.html” target=“_blank ”> About</a>

44
45
Tables
What is a Table?
A table represents information in a grid format.

example

46
Basic Table Structure

The <table> element is used to create a table. The contents of the


table are written out row by row. <table>
You indicate the row using the <tr> element.
(The tr stands for table row.) <tr>
Each cell of a table is represented using a <td> element.
(The td stands for table data.) <td>

47
Table Headings

The <th> element is used just like the <td> element but its purpose
is to represent the heading for either a column or a row.
(The th stands for table heading.)
<th>
<th>

48
colspan & rowspan Attribute

Sometimes you may need the entries in a table to stretch across


more than one column or You may also need entries in a table to
stretch down across more than one row.

The colspan attribute and rowspan attribute can be used on a


<th> or <td> element to indicate how many columns and rows
should span.

colspan

rowspan

49
Long Tables
There are three elements that help distinguish between the main content
of the table and the first and last rows.
These elements help you to style these sections in a different manner
than the rest of the table (as you will see when you learn about CSS).

The headings of the table should sit inside the <thead> element.
<thead>
The body should sit inside the <tbody> element.
<tbody>
The footer belong inside the <tfoot> element.

<tfoot>
50
51
Forms
HTML forms give you a set of elements to collect data from your
users.

In this chapter you will learn:

• How to create a form on your website.


• The different tools for collecting data.
• New HTML5 form controls.

52
Form Controls
There are several types of form controls that you can use to collect
information from visitors to your site.
Text Input
Adding Text Password Input
Text Area
Radio Buttons
Making Choices Check Boxes
Drop-down Boxes

Submit Buttons
Submitting Forms
Image Buttons

Uploading Files File Upload


53
Form Structure

Form controls live inside a <form> element.

<form>

<input type = “ ”>


<form>
</form> <input>
The <input> element is used to create several different form
controls. The value of the type attribute determines what kind of
input they will be creating.

54
Adding Text
Text Input Password Input Text Area
type = “ text ” type = “password”
<form>
<textarea> </textarea>

<input>

55
Adding Text
Text Input Password Input Text Area
Attributes

name
Attributes

name
Attributes

name
<form>
size size cols <input>
maxlength maxlength rows

56
Making Choices
Check Boxes Radio Buttons Drop-down
type = “checkbox” type = “ radio ” <select>
<option> </option>
<option> </option>
<form>
</select>

<input>

57
Making Choices
Check Boxes Radio Buttons Drop-down
Attributes

name
Attributes

name
Attributes
in <select>
name
<form>
value value
in <option>
value <input>
checked checked disabled

selected

58
Uploading Files
File Upload
type = “ file ”
<form>
<input>

59
Submitting Forms
Submit Buttons Image Button
type = “ submit ” type = “ image ”
<form>
<input>

60
Submitting Forms
Submit Buttons Image Button

name
Attributes

src
Attributes
<form>
value width <input>
height

61
Grouping Form Elements

<legend> <fieldset>

<form>
<input>
<fieldset>
<legend>
62
Date and Email
Date Input Email Input

<form>
type = “ date ” type = “ email ”

<input>

63
64
Doctype

<!DOCTYPE html>
<!DOCTYPE html>
Because there have been several versions of HTML, each web page
should begin with a DOCTYPE declaration to tell a browser which
version of HTML the page is using

65
Comments

<!-- -->
<!-- comment goes here -->
If you want to add a comment to your code that will not be visible in
the user's browser, you can add the text between these characters

66
ID Attribute

id=“value goes here”


id=“ ”
Every HTML element can carry the id attribute. It is used to uniquely
identify that element from other elements on the page.

Its value should start with a letter or an underscore (not a number or


any other character). It is important that no two elements on the
same page have the same value for their id attributes (otherwise the
value is no longer unique).

67
Class Attribute

class=“value goes here”


class=“ ”
Every HTML element can carry the class attribute.

the value of class can be repeated, multiple tags can have same
value of class.

68
Block Elements

Some elements will always appear to start on a new line in the


browser window. These are known as block level elements.

Examples of block elements are


<h1>, <p>, <ul>, and <li>.

69
Inline Elements

Some elements will always appear to continue on the same line as


their neighboring elements. These are known as inline elements.

Examples of inline elements are


<a>, <b>, <em>, and <img>.

70
Grouping Elements in a Block

<div>
The <div> element allows you to group a set of elements together in
one block-level box.
<div>

71
Grouping Elements in an Inline

<span>
The <span> element acts like an inline equivalent of the <div>
element.
<span>

72
Iframes

<iframe>
<iframe>
An iframe is like a little window that has been cut into your page —
and in that window you can see another page. The term iframe is an
abbreviation of inline frame.

Attributes

1. src
2. height
3. width

73

You might also like