1 / 15

Introduction to HTML: Creating Web Pages with Essential Tags and Tools

Learn the fundamentals of HTML to create web pages using professional editors like Adobe Dreamweaver and simple programs like Notepad. This guide covers the structure of HTML documents, including essential tags such as `<html>`, `<body>`, and heading styles `<h1>` to `<h6>`. Discover how to format text, create hyperlinks with `<a>`, insert images using `<img>`, and add comments for better readability. By the end of this tutorial, you'll have a foundational understanding of HTML necessary for web page creation.

cicero
Télécharger la présentation

Introduction to HTML: Creating Web Pages with Essential Tags and Tools

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 Hypertext Mark-Up Language Web Page Creation

  2. Where do we create our webpages? • Professional editors such as • Adobe Dreamweaver • Microsoft Expression Web • CoffeeCup HTML Editor • Within a word processing program such as • Notepad • Wordpad • Word OR

  3. TAGS • HTML tags are keywords (tag names) surrounded by angle brackets like <html> • HTML tags normally come in pairs like <b> and </b> • The first tag in a pair is the start tag, the second tag is the end tag • Start and end tags are also called opening tags and closing tags

  4. Let’s some coding…. • Step 1: Start Notepad • To start Notepad go to: • Start    All Programs        Accessories            Notepad

  5. Every HTML code begins with? • <html> • This tag states that everything below this tag is included in this page.

  6. Every HTML code ends with? • </html> • This states that all information above this tag should be included in the HTML CODE

  7. The body • <body> is your opening tag for the information that you will display. Be sure to end it with </body>

  8. Yours should look like this!!!

  9. headings • There are 6 styles of headings.. • <h1> </h1> largest • <h2> </h2>large • <h3> </h3>medium • <h4> </h4>small • <h5> </h5>smaller • <h6> </h6>smallest

  10. paragraphs • <p> Information should be placed here. If you would like to start a new paragraph, close this paragraph with  </p> and start a new one.

  11. Changing the text • <b> </b> bold • <em> </em> emphasize • <u> </u> underline

  12. hyperlinks • Use the <a> tag • <a href="http://www.w3schools.com">This is a link</a> Note that what text that you would like to have displayed as your link.

  13. images • Pics, images and graphics use the <img> tag • <imgsrc="w3schools.jpg" width="104" height="142"> • The width and height measurements are included also. Be sure to know the name of the saved image.

  14. Horizontal line and comments • <hr> </hr> • <!--> defines a comment to help you remember and make the program more readable.

  15. Superscript and Subscript • <sub> </sub> • <sup> </sup>

More Related