1 / 12

Introduction to HTML

This guide offers an introduction to HTML (Hypertext Markup Language), the foundational markup language for creating web pages. It covers the structure of an HTML document, including common tags, headings, lists, and links. You'll learn how to format text, insert images, and create hyperlinks in your web content. With practical examples and resources, this document will aid beginners in understanding HTML and building their first web pages effectively.

trista
Télécharger la présentation

Introduction to HTML

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. Introduction to HTML Vincci Kwong Reference/Instruction Librarian

  2. Hyper Text Markup Language • A markup language designed for the creation of web pages and other information viewable in a browser • The basic language used to write web pages • File extension: .htm, .html What is HTML?

  3. What does an HTML File Look Like?

  4. HTML Tags • For example: <b>, <font>,<title>, <p> etc. • Tag usually goes with pair: an open tag (<b>) and an end tag (<\b>) • Single tag: <hr>,<br> • Tags are NOT case sensitive

  5. <html> <head> <title> Page Title Goes Here </title> </head> <body> content goes here </body> </html> HTML Document Structure

  6. Put text on a webpage • <p>Today is my first day at my new job, I’m so excited!</p> • Output: Today is my first day at my new job, I’m so excited! • Put text in center of a page • <center>Hello</center> • Output: Hello • Put text on the right of a page • <p align=“right”>Hello</p> • Output: Hello Text

  7. There are 6 heading commands. <H1>This is Heading 1</H1> <H2>This is Heading 2</H2> <H3>This is Heading 3</H3> <H4>This is Heading 4</H4> <H5>This is Heading 5</H5> <H6>This is Heading 6</H6> Headings

  8. Unordered list • Code: <ul> <li>Coffee</li> <li>Milk</li> </ul> • Output: • Coffee • Milk • Ordered list • Code: <ol> <li>Coffee</li> <li>Milk</li> </ol> • Output: • Coffee • Milk List

  9. A Hypertext link • < a href=“http://www.iusb.edu”>IUSB Home</a> • Output: IUSB Home • A Email link • <a href=“mailto:vkwong@iusb.edu”> Email me</a> • Output: Email me Create Links

  10. Place all images in the same directory/folder where you web pages are • <img src> is a single tag • <img src=“image.gif”> • Output: • Turn an image into a hyerlink • <a href=“http://www.iusb.edu”><img src=“image.gif”></a> • Output: Inserting Image

  11. Open Notepad • Click on File -> Save as… • In the File name pull-down box, type in webpage.html • Click on Save • Type in content for your file • Once you finished the content, click on File -> Save Creating a HTML File

  12. http://www.w3schools.com/html/default.asp Additional Resource

More Related