45
Module 5 HTML: An Introduction
| Date post: | 24-Dec-2015 |
| Category: |
Documents |
| Upload: | rosa-benson |
| View: | 221 times |
| Download: | 1 times |
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
AttributeC
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:UniformResourceLocator
URLs
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
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 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
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
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 charactersMultiple 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”>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
<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 elementsInternal: Use <style> element in <head> sectionExternal: 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
