HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An...
Transcript of HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An...
![Page 1: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/1.jpg)
Module 5
HTML: An Introduction
![Page 2: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/2.jpg)
● A language to describe and create web
pages.
● Stands for:
Hyper
Text
Markup
Language
What is HTML?
![Page 3: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/3.jpg)
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?
![Page 4: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/4.jpg)
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
![Page 5: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/5.jpg)
<p align=”left”>
HTML is really easy!!
</p>
Example
Opening Tag
Attribute
C Content
Closing Tag
Element
![Page 6: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/6.jpg)
<html>
<head>
<title> My First Page </title>
</head>
<body>
Hi! I hope this works….
</body>
</html>
First Web page!
![Page 7: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/7.jpg)
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
![Page 8: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/8.jpg)
![Page 9: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/9.jpg)
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
![Page 10: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/10.jpg)
![Page 11: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/11.jpg)
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
![Page 12: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/12.jpg)
![Page 13: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/13.jpg)
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
![Page 14: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/14.jpg)
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
![Page 15: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/15.jpg)
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
![Page 16: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/16.jpg)
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
![Page 17: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/17.jpg)
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
![Page 18: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/18.jpg)
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>
![Page 19: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/19.jpg)
![Page 20: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/20.jpg)
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
![Page 21: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/21.jpg)
[21]
![Page 22: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/22.jpg)
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
![Page 23: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/23.jpg)
Fruits
<ol type=”A”>
<li>Apples</li>
<li>Oranges</li>
</ol>
*Other types: a, A, 1, i, I
Ordered Lists
![Page 24: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/24.jpg)
Drinks
<ul type=”square”>
<li> Tea </li>
<li> Coffee </li>
<li> Coke </li>
</ul>
*Other types: disc, square, circle
Unordered Lists
![Page 25: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/25.jpg)
<dl>
<dt>Pizzas </dt>
<dd>Cheese, Pepperoni and Veggie </dd>
<dt>Soft Drinks </dt>
<dd> Sprite, Ginger Ale and Pepsi </dd>
</dl>
Description Lists
![Page 26: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/26.jpg)
![Page 27: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/27.jpg)
GO FROM LEFT TO RIGHT!!!
Tags Used: <table>...</table>
<tr>.........</tr>
<th>........</th>
<td>........</td>
Tables
![Page 28: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/28.jpg)
Firstname Lastname Age
John Doe 20
Will Smith 16
![Page 29: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/29.jpg)
<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>
![Page 30: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/30.jpg)
<tr align=”right” valign=”bottom”>
<td> Will </td>
<td> Smith </td>
<td> 16 </td>
</tr>
</table>
![Page 31: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/31.jpg)
![Page 32: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/32.jpg)
Used to pass data to server.
Tags used: <form>...</form>
<input>...</input>
<textarea>...</textarea>
<select>...</select>
<option>...</option>
Forms
![Page 33: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/33.jpg)
<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
![Page 34: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/34.jpg)
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
![Page 35: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/35.jpg)
![Page 36: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/36.jpg)
<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
![Page 37: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/37.jpg)
<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
![Page 38: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/38.jpg)
![Page 39: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/39.jpg)
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
![Page 40: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/40.jpg)
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
![Page 41: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/41.jpg)
![Page 42: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/42.jpg)
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
![Page 43: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/43.jpg)
![Page 44: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/44.jpg)
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
![Page 45: HTML: An Introductioncvstproject.com/wp/wp-content/uploads/2014/08/Module-5.pdf · HTML: An Introduction A language to describe and create web pages. Stands for: Hyper Text Markup](https://reader033.fdocuments.in/reader033/viewer/2022052923/5f03d0867e708231d40ae781/html5/thumbnails/45.jpg)
[22]