Hypertext Markup Language
IFI7174.DT – Lesson 1
@ Sonia Sousa 2
OutlineHTML
Basic concepts
Basic elements
Text
Lists
Hyperlinks and images
Tables
Forms
2015
Concepts
• HTML is – A markup language interpreted by Web browsers– It is “spoken” into 2 different ways…
• CLIENT side – a person (user) perspective
» who access to a Web site.• SERVER side
– data storage perspective » information/data that is stored in a computer (server)
and later is distributed to clients (users)
Why?• If we can generate HTML easily• First.... because you need
– Clean code to develop distributed interfaces• Second.... you need
– To have control over the code• What happen if some problem happens?• How to fix it?
– Need to talk with a Professional
• Last… you need confidence and competence– To talk with developers– To be able to
• Create a particular result • Read or reuse the code, and "borrow" the effects.
Dreamweaver or wordpress
What HTML does?• HTML defines the structure of the document
– Document• Pages – structure
– Content • multimedia elements
– text, lists, links, images, tables, and forms
• Provide the information needed for – the browser to present the content to the user; and
• define What each element is..– Heading – paragraph – list of items, – a link, – or an image
• This is due by adding markups “< > </>”
HTML and HTML5
• Added new semantic elements– HTML
• <head>, <title>, and <body>– HTML5
• Extra elements – <header>, <section>, <footer>, – <aside>, <nav>, <main>, <article>, <figure>
• Removed elements– <frame>, <center>, <dir> or <applet>
HTML and XHTML
• XHTML– Is a Extensible HyperText Markup Language– HTML
• Is a HyperText Markup Language
• Helps you to cope with– Different browser technologies– It combines HTML and XML
• XML is EXtensible Markup Language– Designed to describe data– Demands for well-formed code
XHTML
• Mandatory – DOCTYPE declaration <!DOCTYPE html>– Structure Attributes
• <html>, <head>, <title>, and <body>– Elements
• Correctly nested• Closed• Lowercase• Values must be Quoted• No minimization attributes
Tools to use
• Text editor– Coda 2
• http://www.panic.com/coda/– Notepad++
• https://notepad-plus-plus.org– Any text editor
• Notepad
DOCUMENT STRUCTURE
Document structure<html>
</html>
<head>
</body>
</head><body>
<h1> Heading of the text </h1>
<p> block <br> of text </p>
<h2>sub Heading </h2>
What the browser show
<!DOCTYPE html>
HTML elements
The opening/closing tags – <html> the closing tag is </html>
• a "tag" also can be called an "element”
<! DOCTYPE html> = HTML<html> = initiate page
</html> = end page
<head>
</head>
<body>
</body>
HTML elements
<! DOCTYPE html> = HTML
<html> = initiate page
</html> = end page
<head>
</head><title> </title>
<body>
</body>
<meta charset="utf-8"> informs the browser what type of letters the page is written in<meta name="description" content="”> for keywords
contains the code that generates what you see in a browser
Basic tags: text, lists, links, images, tables, and forms
HTML EXERCISEStructure document
Create your first page
<!DOCTYPE html ><html><head><title>My first web page</title></head>
<body>This is my first web page
</body>
</html>
Basic elements
• Text– Heading tags
• <h1></h1>, <h2></h2> … <h6></h6>
– Use them when possible• Google likes this tags.
!!! Google assumes !!! • the contents of <h1> tags are more important than
<h2> tags and so on.
Headings tags
<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3><h4>This is heading 4</h4><h5>This is heading 5</h5><h6>This is heading 6</h6>
Formating elements
– <p> </p> tag paragraph
– <br /> tag line break
– <div></div> tag for division or a section
– adding a space - non-breaking space.
It is essentially a standard space
– <hr /> horizontal rule
Examples<p>Here is a first paragraph of text.</p><p>Here is a second paragraph of text.</p>
<p>Hello<br />You delivered your assignment ontime. <br /><hr /> Thanks</p>
<p>This text is not in the center.</p><center><p>This text is in the center.</p></center>
HTML EXERCISEformatting
<!DOCTYPE html ><html><head><title>My first web page</title></head>
<body><h1>My first web page</h1><h2>What this is</h2><p>A simple page put together using HTML</p><h2>Why this is</h2><p>To learn HTML</p>
</body></html>
Using… headings
Lists elements– UL (bullet)
– OL (number)
– DL (definition)
<ul> <li>List item 1</li></ul>
<ol> <li>List item 1</li></ol>
<dl> <dt>Term 1</dt> <dd>Definition of term 1</dd></dl>
HTML EXERCISEList data
Add this… lists
<body><h1>My first web page</h1><h2>What this is</h2><p>A simple page put together using HTML</p><h2>Why this is</h2>
<ul><li>To learn HTML</li><li>To show off</li><li>Because I've fallen in love with my computer </li></ul>
</body>
<ul><li>To learn HTML</li><li>To show off
<ol><li>To my boss</li><li>To my friends</li><li>To my cat</li><li>To the little talking duck in my brain</li>
</ol></li><li>Because I've fallen in love with my computer.</li>
</ul>
Add this… lists
Hyperlinks and images• An image
– <img src=”me.png" alt=”Sonia Sousa face” />
• Image path
greeny.cs.tlu.ee
Page2.htmlPage1.htmlIndex.html
print.tiffme.pngheader.jpgimage
root
Folder structure
• Same folder<a href="me.png">Page </a>
• Inside folder<a href="image/me.png">Page </a>
• outside folder<a href="../image/me.png">Page </a>
How to add images• In the same folder
• in a subfolder of the page referencing it
• somewhere else on the World Wide Web
• Attributes– alt adding an alternative description.– width and height size frame the image.
<img src=”me.jpg" />
<img src="images/me.jpg"/>
<img src="http://www.tlu.org/tlu.jpg" />
<img src=”../ images/me.jpg"/>
Hyperlinks and images• An Hyperlink
– <a href="url">link text</a>– Create a bookmark
• allow readers to jump to specific parts of a Web page– first create the bookmark
» <h2 id=”book”> my books</h2>– Then link it
» <a href=”#book">see my book list</a>
– Target attributes• target="_blank” – open a new window • target=”_self “ - open same window/frame
HTML EXERCISEHyperlinks and images
<body><p id=”top">To learn HTML</p><h2 id=”top">Where to find the tutorial</h2>
<p><a href="http://www.w3schools.com">HTML examples</a><a href=“list.html">The miracle of links…</a><a href="#top">Go to top</a>
</p></body>
Add this… links
HTML EXERCISETables
Tables
• Grid format– Think in terms of cells and rows and columns.– Proprieties
• width, height, cellspan, border, valign/align, bgcolor, colspan
<td> one Cells </td>
<td> Cells 1 </td>
<table>
</table>
<tr>
<tr></tr>
</tr>
<td> Cells 2 </td>
table element defines the table.
tr element defines a table row.
td element defines a data cell.
Tables
• Proprieties – Width= “763px” define the width of the table– height = “99px” define the height of the table– rowspan= cell span many rows– Border =1 to define a border– valign/align, vertical and horizontal alignment valign="middle" ,
align="center" – bgcolor = “#597172” define the background color of the table– Colspan = "2” = cell span 2 columns
<table width="763px" border="1" align="center" cellpadding="5" cellspacing="3”>
<tr align="center" valign="middle" bgcolor="#597172”>
<td height="99" colspan="2”>
HTML EXERCISETables
<table ><tr >
<td >Row 1, cell 1</td><td>Row 1, cell 2</td><td>Row 1, cell 3</td>
</tr><tr>
<td>Row 2, cell 1</td><td>Row 2, cell 2</td><td>Row 2, cell 3</td>
</tr><tr>
<td>Row 3, cell 1</td><td>Row 3, cell 2</td><td>Row 3, cell 3</td>
</tr><tr>
<td>Row 4, cell 1</td><td>Row 4, cell 2</td><td>Row 4, cell 3</td>
</tr></table>
Add this… table
Forms
• Enables you to collect information from users
</form>
<form >
username >
I vote for
submit
CristianSoniaEdgar
Thank you for your vote
<input type=“” name=“”>
action=“Where you send the information ”method=“GET open information
POST long information or sensitive data”
specifies the HTTP method
HTML forms
• Text Input Controls<form>First name: <input type="text” name="first_name" />Description : <br /><textarea rows="5" cols="50" name="description”>
Enter description here…</textarea></form>
HTML forms
• Making choices– Checkboxes Controls
<form><input type="checkbox" name="maths" value="on"> Maths<input type="checkbox" name="physics" value="on"> Physics</form>
– Radio Box Controls<form><input type="radio" name="subject" value="maths"> Maths<input type="radio" name="subject" value="physics"> Physics</form>
HTML forms
• Select Box Controls<form><select name="dropdown"><option value="Maths" selected>Maths</option><option value="Physics">Physics</option></select></form>
• File Select boxes<form><input type="file" name="fileupload" accept="image/*" /></form>
HTML forms
• Submit, Reset and image Buttons<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton" src="/html/images/logo.png" />
</form>
HTML forms• Password input
<form >User ID : <input type="text" name="user_id" /><br>Password: <input type="password" name="password" /></form>
Example – input text & submit
<form action=”logtext.php" method="get">First name:
<input type="text" name="first_name" value="" maxlength="100" />
<br />Last name: <input type="text" name="last_name" value="" maxlength="100" />
<input type="submit" value="Submit" /></form>
Example – input text & submit
Add this… form<form action="mailto:[email protected]" method="post">
Name: <br /><input type="text" name="name" value="Type your name” /><br /><br />
<p>Are you:</p><input type="radio" name="areyou" value="male" /> Male<input type="radio" name="areyou" value="female" /> Female
<input type="submit"><input type="reset">
</form>
Additional information
How to… organize files
• Common file names – Seen as main page by the browser
• "index.html" or "index.htm"
greeny.cs.tlu.ee
Page2.htmlPage1.htmlIndex.html
print.tiffme.pngheader.jpgimages
root
Folder structure
Image formats• pixel-based graphics
– Resolution and size influence the quality of the information• Think in pixels: Resolution 72px, 92px
• Format– .gif
• bitmap image format, supports animations, compressed image without degrading the visual quality
– .png • Raster graphics format, created to replace GIF format
• Format .jpg– Images with color (photos)
• Compress image, can lose information
• Vector graphics– represent geometrical primitives
• points, lines, curves, and shapes or polygons– can be magnified infinitely without loss of quality,
HTML Color Modes
• Color Names – To be more specific, use Hexadecimal codes
• #FFCC00– Can be shortened to three letters if they're
• the same #FC0– Newer browsers can use
• rgb(0,0,0,0.5);
http://www.color-hex.comhttp://www.w3schools.com/tags/ref_colornames.asphttp://www.w3schools.com/tags/ref_colorpicker.asp
HTML tags
http://www.w3schools.com/tags/ref_html_dtd.asp
EXERCISE 1 - HTML
Frame structure