Scribd
Upload
91 views

HTML

HTML stands for Hypertext Markup Language and is used to define the structure and layout of web pages using markup tags. Some key points covered in the document include: - HTML files are text files that use tags to tell browsers how to display content - Popular text editors for creating HTML include Notepad++ and TextEdit - Basic HTML page structure includes <html>, <head>, <title>, and <body> tags - Common elements that can go in the <body> include headings, paragraphs, lists, links, images, and tables

Uploaded by

Matteo Do
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
91 views

HTML

HTML stands for Hypertext Markup Language and is used to define the structure and layout of web pages using markup tags. Some key points covered in the document include: - HTML files are text files that use tags to tell browsers how to display content - Popular text editors for creating HTML include Notepad++ and TextEdit - Basic HTML page structure includes <html>, <head>, <title>, and <body> tags - Common elements that can go in the <body> include headings, paragraphs, lists, links, images, and tables

Uploaded by

Matteo Do
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 28

By: Allib

HTML: What is it?

HTML stands for Hyper Text Markup Language


An HTML file is a text file containing small markup
tags
The markup tags tell the Web browser how to display
the page
An HTML file can be created using a simple text
editor or a WYSIWIG editor
HTML: Editors

Since HTML files are just text files, many programs


can be used to create them. Some programs provide
special assistance for handling HTML, like syntax-
highlighting or auto completion.
WindowsMacFree: Notepad++, AptanaTextEdit, 
Smultron
$$E-Text EditorTextMate, Coda, Espresso
History of HTML

1992 – HTML first defined


1994 – HTML 2.0
1996 –HTML 3.2 , compromise version
1997- HTML 4.0 separates content from presentation
1998- XML standard for writing web languages
2000 – XHTML 1.0, compliant HTML
2002 – XHTML 2.0
Anatomy of an HTML tag

<tagname attribute="value"> content </tagname>

<a href="http://www.google.com" > Google </a>

Think of a tag as a "command" to the browser and of


the attributes as modifiers of that command.
Basic Outline of an HTML code
<html>
<head>
<title> </title>
</head>
<body>

</body>
</html>
HTML Basics
The doctype isn't an actual tag, but it needs to be at
start at every HTML page to tell browser which version
of HTML you're using (HTML5, in example below).
The html tag is always the first tag in the page.
<!DOCTYPE html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Head & Body
The head contains "meta" information about the
page, information that the browser needs before
rendering it.
The body contains the actual content of the page.
<!DOCTYPE html>
 <html>
<head> <meta charset="utf-8">
 <title>Title of your page goes here</title>
</head>
<body> Bulk of your content here. </body>
</html>
What goes in the
body?
Headlines

<h1>Header 1</h1>
To..
<h6>Header 6</h6>

Header 1
Header 2
...Header 6
Paragraphs

<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>

Paragraph 1
Paragraph 2
Paragraph 3
Line Breaks

<p> Here's my favorite song about rabbits: <br>


Little bunny Foo Foo  <br>
Hopping through the forest  <br>
Scooping up the field mice  <br>
And bopping them on the head 
</p>
Notice: This tag does not need to be closed, since it
doesn't encapsulate anything.
Lists

<ul>
<li>Item 1</li>
<li>Item 2</li> ...
</ul>

Item 1
Item 2
...
Ordered Lists

<ol>
<li>Item 1</li>
<li>Item 2</li> ...
</ol>

1. Item 1
2.Item 2
...
Some basic tags:
<blockquote></blockquote> - defines an indented
format
<hr /> - creates a horizontal rule
Formatted Text

<em>Emphasized Info</em>
<strong>Important Info!</strong>
<i> makes text appear italicized </i>
<b> makes text appear bold</b>
<u> makes text appear underlined</u>
<sup> - makes text appear as superscript</sup>
<sub> - makes taxt appear as subscript</sub>
<strike> - makes text appear as crossed out</strike>
Images

<img
src="http://www.google.com/images/srpr/lo
go1w.png" alt="Google">
Links

<a href="http://www.google.com">Google</a>
Google

<a href="http://www.google.com"> <img


src="http://www.google.com/images/srpr/logo1w.png
" alt="Google"> </a>
HTML Validators

Browsers will often render HTML that has mistakes


in it, using different error correction strategies.

To check that your HTML is actually valid according


to the standard, run it through the W3C validator.

You can also install the validator add-on for Firefox.


HTML Resources

When you're on your own and trying to code HTML,


do a search for the tag you're using ("img tag" or "li
tag") and you will usually find good references at the
top.
W3Schools is a simple to read reference with
interactive examples & will often be the top result.
The HTML spec is the official reference, but can be
harder to read.
For more tutorial type sites, check out Mozilla
Developer Network and the Opera Web Standards
curriculum.
Tables

Tables are useful for displaying tabular data on the


web, like research study results.
Tables: Not for Layout
Before we had better techniques, tables were often used
to layout a webpage, but this is now strongly
discouraged.

We will discuss better ways to do layout when we cover


CSS.
The table element
The TABLE element contains all the elements that make
up a table - the header, rows, and columns. This example
shows a table of monthly savings.
<table>
<thead> <tr>
<th>Month </th>
<th>Savings </th>
</tr>
<tbody> <tr>
<td>January </td>
<td>$100 </td>
</tr>
</table>
Code 1
<table border=1>
<tr>
<caption> my first table </caption>
<td>tables
<td>are
<td>cool!
</tr>
</table>
The table body

Tables can consist of any number of data rows after


the header. The tbody element begins the body (data)
area, the same tr element creates a row,
and tdelements create data cells in each row.
<table> .... <tbody> <tr> <td>January </td>
<td>$100 </td> </tr> </table>
Code 2
<table border=1>
<tr>
<caption> my first table </caption>
<td>tables </td>
<td>are </td>
<td>cool! </td>
</tr>
<tr>
<td>and </td>
<td>easy </td>
<td>too! </td>
</tr>
</table>

You might also like