Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML. 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.

Similar presentations


Presentation on theme: "HTML. 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."— Presentation transcript:

1 HTML

2 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

3 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++, Aptana,TextEdit, Smultron Notepad++AptanaSmultron – $$E-Text EditorTextMate, Coda, EspressoE-Text EditorTextMateCodaEspresso

4 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

5 Anatomy of an HTML tag – content – Google – Think of a tag as a "command" to the browser and of the attributes as modifiers of that command.

6 Basic Outline of an HTML code

7 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. –

8 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. – – Title of your page goes here – Bulk of your content here.

9 What goes in the body?

10 Headlines Header 1 Header 2 Header 6 Header 1 Header 2...Header 6

11 Paragraphs Paragraph 1 Paragraph 2 Paragraph 3 Paragraph 1 Paragraph 2 Paragraph 3

12 Line Breaks Here's my favorite song about rabbits: Little bunny Foo Foo Hopping through the forest Scooping up the field mice And bopping them on the head Notice: This tag does not need to be closed, since it doesn't encapsulate anything.

13 Lists Item 1 Item 2... – Item 1 – Item 2 –...

14 Ordered Lists Item 1 Item 2... 1. Item 1 2.Item 2...

15 Some basic tags: – - defines an indented format – - creates a horizontal rule

16 Formatted Text Emphasized Info Important Info! makes text appear italicized makes text appear bold makes text appear underlined - makes text appear as superscript - makes taxt appear as subscript - makes text appear as crossed out

17 Images

18 Links Google

19 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.the W3C validator – You can also install the validator add-on for Firefox.validator add-on

20 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. W3SchoolsHTML spec For more tutorial type sites, check out Mozilla Developer Network and the Opera Web Standards curriculum.Mozilla Developer NetworkOpera Web Standards

21 HTML- ADVANCE

22 Tables – Tables are useful for displaying tabular data on the web, like research study results.

23 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.

24 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. Month Savings January $100

25 Code 1 my first table tables are cool!

26 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. –.... January $100

27 Code 2 my first table tables are cool! and easy too!


Download ppt "HTML. 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."

Similar presentations


Ads by Google