HTML Basics

HTML Basics PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

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.

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - 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" ""> <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

  • Login