module 5
DESCRIPTION
Module 5. HTML: An Introduction. What is HTML?. A language to describe and create web pages. Stands for: H yper T ext M arkup L anguage. What Do You Need?. Just two very basic things and you can start creating your own web pages! - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/1.jpg)
Module 5HTML: An Introduction
![Page 2: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/2.jpg)
● A language to describe and create web pages.
● Stands for: Hyper Text Markup Language
What is HTML?
![Page 3: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/5.jpg)
<p align=”left”>
HTML is really easy!!</p>
Example
Opening Tag
AttributeC
Content
Closing Tag
Element
![Page 6: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/8.jpg)
![Page 9: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/10.jpg)
![Page 11: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/12.jpg)
![Page 13: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/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:UniformResourceLocator
URLs
![Page 14: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/14.jpg)
https://www.youtube.com/watch?v=5gkJ_8Fow64To 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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/15.jpg)
https://www.youtube.com/watch?v=5gkJ_8Fow64scheme://host.domain:port/path/filename
Path: Path at the serverFilename: name of document/resource [1]
[1] http://www.w3schools.com/html/html_urlencode.asp
![Page 16: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/16.jpg)
HTTP (Hyper Text Transfer Protocol): Not encryptedHTTPS (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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/19.jpg)
![Page 20: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/21.jpg)
![Page 22: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/26.jpg)
![Page 27: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/27.jpg)
GO FROM LEFT TO RIGHT!!!
Tags Used: <table>...</table> <tr>.........</tr> <th>........</th> <td>........</td>
Tables
![Page 28: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/28.jpg)
Firstname Lastname Age
John Doe 20
Will Smith 16
![Page 29: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/30.jpg)
<tr align=”right” valign=”bottom”><td> Will </td><td> Smith </td><td> 16 </td></tr></table>
![Page 31: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/31.jpg)
![Page 32: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/33.jpg)
<form>Username <input type=”text” name=”uname”>Password <input type=”password” name=”pwd”></form>*default width=20 charactersMultiple lines: <textarea rows=”10” cols=”30”> This box is for longer text like addresses. </textarea>
Text boxes
![Page 34: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/34.jpg)
Radio button:<input type=”radio” name=”gender” value=”male”>Male <input type=”radio” name=”gender” value=”female”>FemaleCheck 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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/35.jpg)
![Page 36: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/38.jpg)
![Page 39: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/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 elementsInternal: Use <style> element in <head> sectionExternal: Use external CSS file
CSS: An Intro
![Page 40: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/41.jpg)
![Page 42: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/43.jpg)
![Page 44: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/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: Module 5](https://reader035.vdocuments.us/reader035/viewer/2022062813/56816616550346895dd961df/html5/thumbnails/45.jpg)