Presentation is loading. Please wait.

Presentation is loading. Please wait.

Introduction to HTML M. Douglas Wray. Covered in this class: HTML 4 vs XHTML The DOCTYPE and why it's crucial Elements, the basic building blocks of a.

Similar presentations


Presentation on theme: "Introduction to HTML M. Douglas Wray. Covered in this class: HTML 4 vs XHTML The DOCTYPE and why it's crucial Elements, the basic building blocks of a."— Presentation transcript:

1 Introduction to HTML M. Douglas Wray

2 Covered in this class: HTML 4 vs XHTML The DOCTYPE and why it's crucial Elements, the basic building blocks of a web page CSS and how it relates to HTML How to write clean, standards-compliant code What NOT to do

3 But first, tell me about YOU Tell us who you are and why youre here.

4 About Doug Wray Web developer since 1999, worked for StorageTek, EDS and the University of Colorado Teach Intro to Web Design and Intro to HTML Avid WordPress user and consultantWordPressuserconsultant Personal website: macwebguru.commacwebguru.com Personal

5 Source materials for this class Much of the material discussed comes from: html/ - open-source web curriculum. html/ W3Schools.com HTML Tutorial: as well as links here:

6 What is HTML HyperText Markup Language Markers around text (elements) instruct browser on how to deal with text. HTML 4.01 / XHMTL Reference Note: this list is extensive, heres the ones youre going to use the most:

7 FAH – Frequently-Accessed HTML Elements youll use routinely start and end hypertext anchors start/end bold text (also

8 Headfirst into the Web The is where basic assumptions and linkages are defined. - defines browser rending ruleset – W3C DoctypesW3C Doctypes - html document title in browser bar - defines metadata in an HTML document – keywords and descriptionkeywords and description - references external documents such as stylesheet and JavaScriptexternal documents Much more detail about the element

9 Typical Text First header This is a paragraph. It can have color text. It can have bold text in it as well as italic. You dont nest lists inside it, theyre a separate element. You can also break lines.It cancolor text List item Second header Table Data Cell Table Data Cell Table Data Cell Table Data Cell Table Data Cell Table Data Cell This is indented text. It can be many words. It can have bold text in it as well as italic. You dont nest tables inside it, theyre a separate element. Marking up text and Lesser-known semantic elements.Marking up textLesser-known semantic elements

10 Arr!!! Drop Anchor! Linked text Go to subject section in page New Veender Even more detail on linking

11 Intrapage Links Widgets Gidgits Digits Midgets More details Luna Beach Resort FAQ Section One All about widgets Section Two All about gidgits Section Three All about digits Section Four All about midgets

12 Links and images Basic link-on-image: image.jpg can be a button or a picture. Note, button- based navigation is tedious to maintain. Google sliding doors of CSS for details on reusable button menu. If dont WANT an underline/border on rollover.

13 Lists First list item Second list item And so on...

14 List o links – bulleted (default) First linked item Second linked item Google

15 List o links – ordered (numbered) First linked item Second linked item Google More list examples

16 List styles noneNo marker circleThe marker is a circle discThe marker is a filled circle. This is default squareThe marker is a square armenianThe marker is traditional Armenian numbering decimalThe marker is a number decimal-leading-zeroThe marker is a number padded by initial zeros (01, 02, 03, etc.) georgianThe marker is traditional Georgian numbering (an, ban, gan, etc.) lower-alphaThe marker is lower-alpha (a, b, c, d, e, etc.) lower-greekThe marker is lower-greek (alpha, beta, gamma, etc.) lower-latinThe marker is lower-latin (a, b, c, d, e, etc.) lower-romanThe marker is lower-roman (i, ii, iii, iv, v, etc.) upper-alphaThe marker is upper-alpha (A, B, C, D, E, etc.) upper-latinThe marker is upper-latin (A, B, C, D, E, etc.) upper-romanThe marker is upper-roman (I, II, III, IV, V, etc.)

17 Table elements - tabulated data - table headers - table row - table data cell Basic tableBasic table by Jenifer Hanen at Dev.Opera.Com

18 Forms - broder around form - title above form - titles for fields - input forms - form fields - items in a selector - drop-down list in form HTML formsthe basics

19 DIV-ide and conquer DIV = division of page – block element DOM – Document Object ModelDocument Object Model Generic containers – the div and span elements The CSS layout model - boxes, borders, margins, padding Divitis CSS Zen Garden

20 HTML Image Maps Clickable areas on images Example code and demo Luna Beach Resort dive site map

21 CSS Styles – made of Rules and SelectorsRules and Selectors Inline and External - command – ExamplesExamples Divs and the Box Model Floated elements and clearing floats – Floatin Away Floated elements and clearing floatsFloatin Away Styling text W3 Schools CSS Tutorial

22 CSS in use This is a styled paragraph p {color:red;} This is a styled paragraph So is this In fact, they ALL are

23 Class act.warning { color:red; font-style:italic; font-weight:900; } Danger Will Robinson! Defining style rules My list of CSS Links

24 ? I welcome your questions!


Download ppt "Introduction to HTML M. Douglas Wray. Covered in this class: HTML 4 vs XHTML The DOCTYPE and why it's crucial Elements, the basic building blocks of a."

Similar presentations


Ads by Google