45
Module 5 HTML: An Introduction
Module 5
HTML: An Introduction
● A language to describe and create web
pages.
● Stands for:
Hyper
Text
Markup
Language
What is HTML?
Just two very basic things and you can start
creating your own web pages!
1) A Browser: Google Chrome, Internet
Explorer, Mozilla Firefox etc.
2) Text Editor: Notepad, Pico, TextEdit
What Do You Need?
Elements: HTML document contains several
elements which give it structure.
Major Elements: <html>...</html>
<head>...</head>; <body>...</body>
Tags: Labels used to mark the start and end
of an element.
Opening Tag: <head> Closing Tag: </head>
Elements and Tags
<p align=”left”>
HTML is really easy!!
</p>
Example
Opening Tag
Attribute
C Content
Closing Tag
Element
<html>
<head>
<title> My First Page </title>
</head>
<body>
Hi! I hope this works….
</body>
</html>
First Web page!
There are 6 possible headings:
<h1 > This is Heading one </h1>
<h2 align=”left”> This is Heading two </h2>
<h3 align=”center”> This is Heading three </h3>
<h4 align=”right”> This is Heading four </h4>
<h5 align=”justify”> This is Heading five </h5>
<h6> This is Heading six </h6>
Heading Tags
Paragraph Tag: <p>....</p>
<p align=”left”> This is a paragraph </p>
<p align=”center”> Another paragraph </p>
<p align=”right”> One more paragraph </p>
Font Tag: <font>...</font>
<font face=”Monotype Corsiva” size=14 color=”red”>
This is a random line.
</font>
Paragraph And Font Tags
Bold & Strong: This is <b> bold </b> and <strong>
strong </strong>
Italics & Emphasis: This is<i>italics</i> and
<em>emphasized</em>
Underline: This is <u>underlined</u>
Superscript and Subscript: This is in
<sup>superscript</sup> and this is in
<sub>subscript</sub>
Formatting Tags
URL is the address of a web page.
Composed of words(http://www.google.com)or
numbers(IP address)(192.68.20.50)
Stands for:
Uniform
Resource
Locator
URLs
https://www.youtube.com/watch?v=5gkJ_8Fow64
To break it down:
scheme://host.domain:port/path/filename
Scheme: Defines type of internet service.(http/https/ftp)
Host: Domain host (default for http is www)
Domain: Internet domain name (youtube.com)
Port: Port number at the host (default for http is 80)
URL Syntax
https://www.youtube.com/watch?v=5gkJ_8Fow64
scheme://host.domain:port/path/filename
Path: Path at the server
Filename: name of document/resource [1]
[1] http://www.w3schools.com/html/html_urlencode.asp
HTTP (Hyper Text Transfer Protocol): Not encrypted
HTTPS (Secure HyperText Transfer Protocol): Web
pages are secure and information exchange is
encrypted.
FTP (File Transfer Protocol): For downloading and
uploading files to a website.
File: A file on your computer [1]
[1] http://www.w3schools.com/html/html_urlencode.asp
URL Schemes
Use the <a>...</a> tag
External Hyperlinks:
Click <a href=”http://www.google.com/”
target=”_blank”> here </a> to go to Google’s
homepage.
Hyperlinks
Internal Hyperlinks: Helps in creating internal
bookmarks.
Use id attribute and “#”
<a href=”#tips”> Visit Useful Tips Section
</a>
<a id=”tips”> Useful Tips </a>
Just use <img> (Open Tag)
<img src=”image.gif” width=”40%”
height=”350” border=”5” alt=”This is a
cartoon”>
* can set height and width in pixels or
percentage of screen size
Image Tag
[21]
There are three types of lists:
Ordered Lists: <ol>...</ol>, <li>...</li>
Unordered Lists: <ul>...</ul>, <li>...</li>
Description Lists: <dl>...</dl>, <dt>...</dt>,
<dd>...</dd>
Lists
Fruits
<ol type=”A”>
<li>Apples</li>
<li>Oranges</li>
</ol>
*Other types: a, A, 1, i, I
Ordered Lists
Drinks
<ul type=”square”>
<li> Tea </li>
<li> Coffee </li>
<li> Coke </li>
</ul>
*Other types: disc, square, circle
Unordered Lists
<dl>
<dt>Pizzas </dt>
<dd>Cheese, Pepperoni and Veggie </dd>
<dt>Soft Drinks </dt>
<dd> Sprite, Ginger Ale and Pepsi </dd>
</dl>
Description Lists
GO FROM LEFT TO RIGHT!!!
Tags Used: <table>...</table>
<tr>.........</tr>
<th>........</th>
<td>........</td>
Tables
Firstname Lastname Age
John Doe 20
Will Smith 16
<table border=2 align=center bgcolor=”#F5DEB3”
cellpadding=2 width=75% height=50%>
<tr align=”left” valign=”top”>
<th> Firstname </th>
<th> Lastname </th>
<th> Age </th>
</tr>
<tr align=”center” valign=”middle”>
<td> John </td>
<td> Doe </td>
<td> 20 </td>
</tr>
<tr align=”right” valign=”bottom”>
<td> Will </td>
<td> Smith </td>
<td> 16 </td>
</tr>
</table>
Used to pass data to server.
Tags used: <form>...</form>
<input>...</input>
<textarea>...</textarea>
<select>...</select>
<option>...</option>
Forms
<form>
Username <input type=”text” name=”uname”>
Password <input type=”password” name=”pwd”>
</form>
*default width=20 characters
Multiple lines:
<textarea rows=”10” cols=”30”> This box is for longer
text like addresses. </textarea>
Text boxes
Radio button:
<input type=”radio” name=”gender” value=”male”>Male
<input type=”radio” name=”gender”
value=”female”>Female
Check Boxes:
<input type=”checkbox” name=”drink” value=”tea”>I will
have tea <br>
<input type=”checkbox” name=”drink” value=”coffee”>I
will have coffee
Buttons
<form>
<select name=”Transport”>
<option value=”Car” selected> Car </option>
<option value=”Bicycle”> Bicycle </option>
<option value=”Skateboard”> Skateboard </option>
<option value=”Transit”> Public Transit </option>
</select>
</form>
Drop Down List
<form name=”info” action=”demo_form_action” >
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
<input type=”submit” value=”Submit”>
</fieldset>
</form>
Fieldset and Submit
CSS (Cascading Style Sheets) is used for
styling and giving structure to your
webpages.
Can be added in 3 ways:
Inline: Use style attribute in HTML elements
Internal: Use <style> element in <head>
section
External: Use external CSS file
CSS: An Intro
Using style attribute:
<h2 style=”background-color: red; font-
family:Comic Sans MS; color: yellow;font-
size: 40px; text-align: center;”> This is a
heading </h2>
CSS Styling
Using <style> element: <head>
<title> CSS </title>
<style type=”text/css”>
h1 {font-size: 25px; font-family: Comic Sans MS;}
p { font-size: 15px; font-family: Impact;}
</style> </head>
<body>
<h1> This is a heading </h1>
<p> This is a paragraph </p> </body>
CSS Styling
1) <p style=”padding:30px; border: 2px solid blue;”>I
understand CSS...maybe! </p>
2) <img src=”css1.png” style=”float:right;”>
<p>This is another cartoon!</p>
3) <img src=”css1.png”
style=”position:absolute;top:200px;right:125px;”>
More with CSS
[22]
![1 Hyper Text Markup Language (HTML) UNIT- 02 Hyper Text Markup Language (HTML) UNIT-02/LECTURE-01 Introduction to Hyper Text Markup Language (HTML) About HTML: [RGPV/Dec 2013(4)] So](https://static.documents.pub/doc/80x56/5aae4bc17f8b9a25088c15fa/1-hyper-text-markup-language-html-unit-02-hyper-text-markup-language-html-unit-02lecture-01.jpg)
