Scribd
Upload
145 views

HTML Basics: Trainer-Renuka S

Uploaded by

Kalathees
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
145 views

HTML Basics: Trainer-Renuka S

Uploaded by

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

HTML Basics

Trainer- Renuka S
How the Web Works?
WWW use classical client / server architecture
• HTTP is text-based request-response protocol

HTTP
Page request

HTTP
Server response

Server running
Client running a
Web Server
Web Browser
Software (IIS,
Apache, etc.) 2
What is a Web Page?

Web pages are text files which holds information containing


HTML

HTML-Hyper Text Markup Language

Why Webpage? To share the Info universally in an standard


form without any software requirements.

3
Three Layers of Web page
• Structural Layer-
Contents of webpage-HTML
• Presentation Layer
Look and Feel of Webpage-CSS
• Behaviour Layer
Interaction for User Interface-JavaScript
Creating HTML Pages

An HTML file must have an .htm or .html file extension


HTML files can be created with text editors:
• NotePad, NotePad ++, Visual Studio Code, Sublime Text, ATom

5
HTML Basics
Text, Images, Tables, Forms
HTML Structure

Anatomy Of Tag- Opening and Closing tag

<html> <head></head> <body></body> </html>

Tag can have attributes (Name and Value


pair)

<img src="logo.jpg" alt="logo" />

7
HTML Structure

8
HTML Structure
HTML is comprised of “elements” and “tags”
• Begins with <html> and ends with </html>

Elements (tags) are nested one inside another:


<html> <head></head> <body></body> </html>
Tags have attributes:
<img src="logo.jpg" alt="logo" />
HTML describes structure using two main sections:
<head> and <body>

9
First HTML Page
test.html
<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>

10
First HTML Page: Tags

<!DOCTYPE HTML>
<html>
Opening
tag
<head>
<title>My First HTML Page</title>
</head>
<body> Closing
<p>This is some text...</p> tag
</body>
</html>
An HTML element consists of an opening tag, a closing tag and the
content inside.

11
First HTML Page: Header

<!DOCTYPE HTML>
HTML
header
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>

12
First HTML Page: Body

<!DOCTYPE HTML>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<p>This is some text...</p>
</body>
</html>
HTML body

13
The <head> Section
Contains information that doesn’t show directly
on the viewable page
Starts after the <!doctype> declaration
Begins with <head> and ends with </head>
Contains mandatory single <title> tag
Can contain some other tags, e.g.
• <meta>
• <script>
• <style>
• <!–- comments -->
14
<head> Section: <title> tag

Title should be placed between <head> and


</head> tags

Used to specify a title in the window titlebar


Search engines and people rely on titles

15
<head> Section: <script>

The <script> element is used to embed scripts into an HTML


document
• Script are executed in the client's Web browser
• Scripts can live in the <head> and in the <body> sections
Supported client-side scripting languages:
• JavaScript (it is not Java!)
• VBScript
• JScript
16
Text Formatting Tags
Heading Tags (h1 – h6)
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

Paragraph Tags
<p>This is my first paragraph</p>
<p>This is my second paragraph</p>

Sections: div and span


<div style="background: skyblue;">
This is a div</div>
17
Text Formatting Tags
Bold Tag
<b> Text Formatting</b>
Italic Tag
<i> Text Formatting</i>
Underline Tag
<u> Text Formatting</u>
Subscript and Superscript
<sub> and <sup>
18
Text Formatting
Text formatting tags modify the text between the opening tag and the
closing tag

• Ex. <b>Hello</b> makes “Hello” bold


<b></b> bold
<i></i> italicized
<u></u> underlined
<sup></sup> Samplesuperscript
<sub></sub> Samplesubscript
<strong></strong> strong
<em></em> emphasized
<pre></pre> Preformatted text
<blockquote></blockquote> Quoted text block
<del></del> Deleted text – strike through

19
Text Formatting
Live Demo
Headings and Paragraphs –
Example
headings.html
<!DOCTYPE HTML>
<html>
<head><title>Headings and paragraphs</title></head>
<body bgcolor=“pink”>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

<p>This is my first paragraph</p>


<p>This is my second paragraph</p>

<div style="background:skyblue">
This is a div</div>
</body>
</html>

21
Headings and Paragraphs –
Example (2)
headings.html
<!DOCTYPE HTML>
<html>
<head><title>Headings and paragraphs</title></head>
<body>
<h1>Heading 1</h1>
<h2>Sub heading 2</h2>
<h3>Sub heading 3</h3>

<p>This is my first paragraph</p>


<p>This is my second paragraph</p>

<div style="background:skyblue">
This is a div</div>
</body>
</html>

22
Self Closing Tags

Self Closing Tags


<HR>- Horizontal Line
<BR>- Break the text into new line
<IMG>-Display the image
Can also be used as <hr/>,<img/> and <br/> also.
Other Tags-
<strong>,<em>,<q>,<blockquote>,<abbr>,<acronym>,<ad
dress>,<del>,<ins> and <s>
Miscellaneous Tags

<hr />: Draws a horizontal rule (line):


<hr size="5" width="70%" />

<center></center>: Deprecated!
<center>Hello World!</center>

<font></font>: Deprecated!
<font size="3" color="blue">Font3</font>
<font size="+4" color="blue">Font+4</font>
<font face=“roboto” size=‘5’ color=“red”>

24
Miscellaneous Tags – Example

misc.html
<html>
<head>
<title>Miscellaneous Tags Example</title>
</head>
<body>
<hr size="5" width="70%" />
<center>Hello World!</center>
<font size="3" color="blue">Font3</font>
<font size="+4" color="blue">Font+4</font>
</body>
</html>

25
<Marquee> Tag

-HTML Support to scrollable texts and images


<marquee behavior="scroll" direction="up"
scrollamount="1">Slow Scrolling</marquee>

<marquee behavior="scroll" direction="right"


scrollamount="12">Little Fast Scrolling</marquee>

<marquee behavior="scroll" direction="left"


scrollamount="20">Fast Scrolling</marquee>

<marquee behavior="scroll" direction="right"


scrollamount="50">Very Fast Scrolling</marquee>
26
Images: <img> tag
 Inserting an image with <img> tag:
<img src="/img/basd-logo.png">

 Image attributes:
src Location of image file (relative or absolute)
alt Substitute text for display (e.g. in text mode)
height Number of pixels of the height
width Number of pixels of the width
border Size of border, 0 for no border
 Example:
<img src="./php.png" alt="PHP Logo" />
<img src=“logo.jpg" alt="PHP Logo" />
<img src="img_girl.jpg" alt="Girl" width="500" height="600“
27
Images: <img> tag

 Image in another folder -/images/html5.gif


 Image on Another server-
https://unsplash.com/images/nature/flower
 Image as Link:<a><img></a>

28
Creating Lists
Live Demo
Ordered Lists: <ol> Tag
Create an Ordered List using <ol></ol>:
<ol type="1">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ol>

Attribute values for type are 1, A, a, I, or i


1. Apple i. Apple
2. Orange ii. Orange
3. Grapefruit iii. Grapefruit
a. Apple
A. Apple b. Orange I. Apple
B. Orange c. Grapefruit II. Orange
C. Grapefruit III. Grapefruit
30
Unordered Lists: <ul> Tag
Create an Unordered List using <ul></ul>:
<ul type="disk">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>

Attribute values for type are:


• disc, circle or square

• Apple o Apple  Apple


• Orange o Orange  Orange
• Pear o Pear  Pear
31
Definition lists: <dl> tag
Create definition lists using <dl>
• Pairs of text and associated definition; text is in <dt> tag,
definition in <dd> tag
<dl>
<dt>HTML</dt>
<dd>A markup language …</dd>
<dt>CSS</dt>
<dd>Language used to …</dd>
</dl>

• Renders without bullets 32


Lists – Example
<ol type="1">
<li>Apple</li>
lists.html
<li>Orange</li>
<li>Grapefruit</li>
</ol>

<ul type="disc">
<li>Apple</li>
<li>Orange</li>
<li>Grapefruit</li>
</ul>

<dl>
<dt>HTML</dt>
<dd>A markup lang…</dd>
</dl>

33
Hyperlinks: <a> Tag

Link to a document called form.html on the


same server in the same directory:
<a href="form.html">Fill Our Form</a>

Link to a document called parent.html on the


same server in the parent directory:
<a href="../parent.html">Parent</a>

Link to a document called cat.html on the


same server in the subdirectory stuff:
<a href="stuff/cat.html">Catalog</a>
34
Hyperlinks: <a> Tag (2)

Link to an external Web site:


<a href="http://www.devbg.org" target="_blank">BASD</a>

• Always use a full URL, including "http://", not just


"www.somesite.com"
• Using the target="_blank" attribute opens the link in a new
window
Link to an e-mail address:
<a href="mailto:bugs@example.com?subject=Bug+Report">
Please report bugs here (by e-mail only)</a>
35
Hyperlinks: <a> Tag (3)

Link to a document called apply-now.html


• On the same server, in same directory
• Using an image as a link button:
<a href="apply-now.html"><img
src="apply-now-button.jpg" /></a>

Link to a document called index.html


• On the same server, in the subdirectory english of
the parent directory:
<a href="../english/index.html">Switch to
English version</a> 36
Hyperlinks and Sections

Named Anchors-Link to another location in the same document


<a href="#section1">Go to Introduction</a>
...
<h2 id="section1">Introduction</h2>

Link to a specific location in another document:


<a href="chapter3.html#section3.1.1">Go to Section
3.1.1</a>
<!–- In chapter3.html -->
...
<div id="section3.1.1">
<h3>3.1.1. Technical Background</h3>
</div>
37
Hyperlinks – Example
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br />
<a href="../parent.html">Parent</a> <br />
<a href="stuff/cat.html">Catalog</a> <br />
<a href="http://www.devbg.org" target="_blank">BASD</a>
<br />
<a href="mailto:bugs@example.com?subject=Bug
Report">Please report bugs here (by e-mail only)</a>
<br />
<a href="apply-now.html"><img src="apply-now-button.jpg”
/></a> <br />
<a href="../english/index.html">Switch to English
version</a> <br />

38
Hyperlinks – Example (2)
hyperlinks.html
<a href="form.html">Fill Our Form</a> <br />
<a href="../parent.html">Parent</a> <br />
<a href="stuff/cat.html">Catalog</a> <br />
<a href="http://www.devbg.org" target="_blank">BASD</a>
<br />
<a href="mailto:bugs@example.com?subject=Bug
Report">Please report bugs here (by e-mail only)</a>
<br />
<a href="apply-now.html"><img src="apply-now-button.jpg”
/></a> <br />
<a href="../english/index.html">Switch to English
version</a> <br />

39
Hyperlinks
Live Demo
Links to the Same Document –
Example
links-to-same-document.html
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br />
<a href="#section2">Some background</A><br />
<a href="#section2.1">Project History</a><br />
...the rest of the table of contents...
<!-- The document text follows here -->
<h2 id="section1">Introduction</h2>
... Section 1 follows here ...
<h2 id="section2">Some background</h2>
... Section 2 follows here ...
<h3 id="section2.1">Project History</h3>
... Section 2.1 follows here ...

41
Links to the Same Document –
Example (2)
links-to-same-document.html
<h1>Table of Contents</h1>
<p><a href="#section1">Introduction</a><br />
<a href="#section2">Some background</A><br />
<a href="#section2.1">Project History</a><br />
...the rest of the table of contents...
<!-- The document text follows here -->
<h2 id="section1">Introduction</h2>
... Section 1 follows here ...
<h2 id="section2">Some background</h2>
... Section 2 follows here ...
<h3 id="section2.1">Project History</h3>
... Section 2.1 follows here ...

42
Links to the Same Document
Live Demo
HTML Special Characters
HTML Special Characters
Symbol Name HTML Entity Symbol
Copyright Sign &copy; ©
Registered Trademark Sign &reg; ®
Trademark Sign &trade; ™
Less Than &lt; <
Greater Than &gt; >
Ampersand &amp; &
Non-breaking Space &nbsp;
Em Dash &mdash; —
Quotation Mark &quot; "
Euro &#8364; €
British Pound &pound; £
Japanese Yen &yen; ¥
45
Special Characters – Example
<p>[&gt;&gt;&nbsp;&nbsp;Welcome special-chars.html
&nbsp;&nbsp;&lt;&lt;]</p>
<p>&#9658;I have following cards:
A&#9827;, K&#9830; and 9&#9829;.</p>
<p>&#9658;I prefer hard rock &#9835;
music &#9835;</p>
<p>&copy; 2006 by Svetlin Nakov &amp; his
team</p>
<p>Telerik Academy™</p>

46
Special Chars – Example (2)
<p>[&gt;&gt;&nbsp;&nbsp;Welcome special-chars.html
&nbsp;&nbsp;&lt;&lt;]</p>
<p>&#9658;I have following cards:
A&#9827;, K&#9830; and 9&#9829;.</p>
<p>&#9658;I prefer hard rock &#9835;
music &#9835;</p>
<p>&copy; 2006 by Svetlin Nakov &amp; his
team</p>

47
The <div> Tag

<div> creates logical divisions within a page


Block style element
Used with CSS
Example:
div-and-span.html
<div style="font-size:24px; color:red">DIV
example</div>
<p>This one is <span style="color:red; font-
weight:bold">only a test</span>.</p>
48
<SPAN>
Live Demo
The <span> Tag

Inline style element


Useful for modifying a specific portion of text
• Don't create a separate area (paragraph) in the document
Makes sense only with some CSS

<p>This one is <span style="color:red; font-


span.html weight:bold">only a test</span>.</p>
<p>This one is another <span style="font-size:32px;
font-weight:bold">TEST</span>.</p>
50
HTML Tables
HTML Tables

Tables represent tabular data


• A table consists of one or several rows

• Each row has one or more columns

Tables comprised of several core tags: <table></table>:


begin / end the table
<tr></tr>: create a table row
<td></td>: create tabular data (cell)
Tables should not be used for layout. Use CSS
52
floats and
positioning styles instead
HTML Tables
Start and end of a table

<table> ... </table>


Start and end of a row
<tr> ... </tr>

Start and end of a cell in a row


<td> ... </td>

53
Simple HTML Tables – Example

<table cellspacing="0" cellpadding="5">


<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
54
</table>
Complete HTML Tables

Table rows split into three semantic sections: header, body and
footer
• <thead> denotes table header and contains <th> elements,
instead of <td> elements
• <tbody> denotes collection of table rows that contain the very
data
• <tfoot> denotes table footer but comes BEFORE the <tbody> tag
• <colgroup> and <col> define columns (most 55often used to set
column widths)
Complete HTML Table: Example

<table>
<colgroup>
columns
<col style="width:100px" /><col />
</colgroup>
header th
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
footer
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
Last comes the body
(data)
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
</tbody> 56
</table>
Cell Spacing and Padding

Tables have two important attributes:


 cellspacing  cellpadding

cell cell cell cell

cell cell cell cell

 Defines the  Defines the empty


empty space space around the cell
between cells content
57
Cell Spacing and Padding – Example

table-cells.html
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
58
</html>
Column and Row Span
Table cells have two important attributes:
 colspan  rowspan rowspan="
colspan=" 1"
colspan=" rowspan="
1" 1" 2"

cell[1,1 cell[1,2 cell[1,2


] ] ]
cell[1,1]
cell[2,1
cell[2,1]
]
colspan=" rowspan="
 Defines how  Defines how 1"
2"
many columns many rows the
the cell cell occupies
59

occupies
Column and Row Span – Example

table-colspan-rowspan.html
<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class=“3"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table>

60
<iframe> Tag

• inline frame is used to embed another document within


the current HTML document.
• src attribute is used to specify the URL of the document

<iframe width="560" height="315"


src="https://www.youtube.com/embed/FzG4uDgje3M"
frameborder="0" allow="; autoplay; clipboard-write;
encrypted-media;picture-in-picture"
allowfullscreen></iframe>

61
<Audio> Tag

• used to embed sound content in a document


• Supported audio formats in HTML: MP3, WAV, and OGG.
• Contains one or more <source>tags with different audio
sources

<audio src=“song.mp3” controls> --</audio>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mp3">
  Your browser does not support the audio tag.
</audio> 62
<Video> Tag

• used to embed video content in a document


• Supported video formats in HTML: MP4, WebM, and
OGG.
• Contains one or more <source>tags with different video
sources

<video src=“song.mp4” controls width=“250”> --</video>

<video controls width=“450”>
  <source src="horse.ogg" type=“video/ogg">
  <source src="horse.mp4" type=“video/mp4">
  Your browser does not support the video tag.
</video> 63
HTML Forms
Entering User Data from a Web
Page
HTML Forms

Forms are the primary method for


gathering data from site visitors
The “method" attribute tells
Create a form block with how the form data should be
<form></form> sent – via GET or POST request

Example:
<form name="myForm" method="post"
action="path/to/some-script.php">
...
</form>
The "action"
65
attribute tells
where the form data should be
Form Fields

Single-line text input fields:


<input type="text" name="FirstName" value="This
is a text field" />

Multi-line textarea fields:


<textarea name="Comments">This is a multi-line
text field</textarea>

Hidden fields contain data not shown to


the user:
<input type="hidden" name="Account" value="This
66
is a hidden text field" />
Form Input Controls

Checkboxes:
<input type="checkbox" name="fruit"
value="apple" />

Radio buttons:
<input type="radio" name="title" value="Mr." />

Radio buttons can be grouped, allowing only one to be selected


from a group:
<input type="radio" name="city" value="Lom" />
<input type="radio" name="city" value="Ruse"
67 />
Other Form Controls

Dropdown menus:
<select name="gender">
<option value="Value 1"
selected="selected">Male</option>
<option value="Value 2">Female</option>
<option value="Value 3">Other</option>
</select>

Submit button: <input type="submit" name="submitBtn"


value="Apply Now" /> 68
Other Form Controls
Password input – a text field which masks
the entered text with * signs
<input type="password" name="pass" />

Multiple select field – displays the list of


items in multiple lines, instead of one
<select name="products" multiple="multiple">
<option value="Value 1"
selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
<option value="Value 3">speakers</option>
69

</select>
Other Form Controls
File input – a field used for uploading files

<input type="file" name="photo" />

• When used, it requires the form element to


have a specific attribute:
<form enctype="multipart/form-data">
...
<input type="file" name="photo" />
...
</form> 70
Labels

Form labels are used to associate an explanatory text to a form field


using the field's ID.
<label for="fn">First Name</label>
<input type="text" id="fn" />

Clicking on a label focuses its associated field (checkboxes are


toggled, radio buttons are checked)
Labels are both a usability and accessibility feature
71 and are required
in order to pass accessibility validation.
HTML Forms – Example
form.html
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="Class" />
<fieldset><legend>Academic information</legend>
<label for="degree">Degree</label>
<select name="degree" id="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of Science</option>
<option value="MBA" selected="selected">Master of
Business Administration</option>
</select>
<br />
<label for="studentid">Student ID</label>
<input type="password" name="studentid" />
</fieldset>
<fieldset><legend>Personal Details</legend>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" />
<br /> 72
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" />
HTML Forms – Example
form.html (continued)
<br />
Gender:
<input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Female</label>
<br />
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS AND CONDITIONS...</textarea>
</p>
<p>
<input type="submit" name="submit" value="Send Form" />
<input type="reset" value="Clear Form" />
</p>
</form> 73

You might also like