1 / 22

HTML Basics

HTML Overview. Hypertext Markup LanguageLanguage of the webForms web pages. XHTML. More stringent standardBetter behaved across browsersWorks with other devices. Tools for web editing. Any text editor is OKFirefox is very handy browserWeb Developer ExtensionMozEdit Extension. Basic Web Page.

shaman
Download Presentation

HTML Basics

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

    1. HTML Basics

    2. HTML Overview Hypertext Markup Language Language of the web Forms web pages

    3. XHTML More stringent standard Better behaved across browsers Works with other devices

    4. Tools for web editing Any text editor is OK Firefox is very handy browser Web Developer Extension MozEdit Extension

    5. Basic Web Page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang = "EN" xml:lang = "EN" dir = "ltr"> <head> <title>Basic XHTML page</title> </head> <body> <h1>HTML CODE GOES HERE</h1> <p> copy and paste this page to a text editor to build your own page </p> </body> </html>

    6. Critical XHTML Tags <html></html> <head></head> <title></title> <body></body> <h1></h1> ...<h6></h6> headings <p></p> paragraph

    7. The Basic page <html> tag defines version of XHTML <head> contains metadata <title>will show up in searches, title bar <body> contains most of page

    8. XHTML Markups XHTML tags DO NOT define how things look Focus on what things mean EG <h1> just means level 1 heading.

    9. Changing appearance with Styles Each tag can have a style attribute associated with it Style determines how something looks

    10. Essential Style Elements color background-color font-family font-size text-align

    11. Style Example <p style = "color: red; background-color: yellow; font-family: Comic Sans MS; font-size: 20pt; text-align: center"> This is my paragraph </p>

    12. Adding Basic Links <a href = “myUrl.html”> linked text</a> Linked text is highlighted as a link When user clicks on link, browser goes to “myURL.html”

    13. Adding Basic Images <img src = “myImage.jpg” height = “200” width = “200” alt = “my Image” />

    16. Ordinary Slide Level 1 Level 2 Level 3

    17. Code My code More Code More Code

More Related