Transcript HTML
HTML Understanding HTML • Web pages are made up of text and graphics you want to display, along with links to other documents. • You use HTML (Hypertext Markup Language) to: ▫ provide information to the browsers as to how to display pages (structure of the document) ▫ create links. Understanding HTML • HTML is a Web’s universal programming language • It’s not specific to any platform, computer brand, or operating system • HTML documents are actually text files with HTML tags embedded. • Each browser expresses the commands in its own way. How can I see the source code of a Web page? • In Internet Explorer • In Mozilla Firefox Creating web pages with HTML • If you want to code your page from scratch, you can use Windows Notepad. ▫ Demonstration • You can create your page using an editor such as iWeb, Microsoft Expression Web, KompoZer, Amaya, or Adobe Dreamweaver Understanding HTML Tags • HTML is a set of codes that you use to create a document. • These codes, called tags, format text, place graphics on the page, and create links. • HTML vs. XHTML Understanding HTML Tags • HTML tags follow a certain format, or syntax • Each tag begins with an opening angle bracket (<), ends with a closing angle bracket (>) and contains a command between the brackets. • Many of the tags are paired. The first tag indicates the beginning of the command. The closing tag of the pair has the same syntax as the opening tag, but includes a forward slash (/) before the command. Example of paired tags <html> The entire Web document </html> Using HTML Structure Tags • Always two main sections: HEAD and BODY <html> <head> <title> text that appears in title bar</title> </head> <body> all information that will be displayed on the screen </body> </html> HTML Structure • Like a sandwich? Using HTML Structure Tags • Many browsers display the title in a title bar when it is displayed • The body section contains the information – text, graphics, and so on – that will appear on the screen. Entering Headings in an HTML File • Headings serve to separate text and introduce new topics on Web pages. • The heading tags used for this purpose vary in size. • The size range from <h1> through <h6>, with <h1> being the largest. Entering Text in Paragraph Format • Web pages generally contain a significant amount of text, most of which will be in paragraph format • <p> </p> • <p> tag starts a new line and adds some additional vertical space between the line it just displayed and the following line. Creating a List • Bulleted lists (Unordered Lists) • Numbered lists (Ordered Lists) <ul type = “typeName”> <li>First Item Name</li> <li>Second Item Name</li> </ul> • typeName: disc, square, circle Creating a List <ol type = “typeName”> <li>First Item Name</li> <li>Second Item Name</li> </ol> • typeName: 1, A, a, I, i Adding Background Color • The bgcolor attribute lets you change the background color of the Web page. • Located in the body tag • See common Web Page Colors and their hexadecimal equivalents + sixteen predefined colors Adding an Horizontal Rule • Horizontal rules are graphical images that act as dividers in a Web page. • <hr> tag Alignment Attribute • align attribute • <h1 align= “center”> • left, center, or right FONT Attributes • font tag <font> • Font Attributes: </font> color Changes the font color Uses color codes face Changes size Changes the font type the font size Choices from 1 to 7, or relative values such as +2 Bold and Italic • Bold: <b>….</b> • Italic: <i>…..</i> Web Page Images • Used as: ▫ Background ▫ Pictures or graphics on the web page • Image Types: ▫ JPEG (Joint Photographic Experts Groups) files: A graphic image that is saved using compression techniques to make it smaller for download on the Web. It supports more colors and resolutions than the other file types => good for complex images such as scanned photographs. Background Images • Use the “background” attribute for the body tag <body background=“assets/stripes.jpg”> Inserting an Image and Wrapping Text • src attribute with border, height, width, align • border value: 0 => No border 1 => Thin border 2 => Thicker border ….. • align value: left, right, bottom, top, middle <img src= “pizza.jpg” border=“1” height=“119” width=“182” align= “left” alt=“Delicious Pizza”> Adding a Link • Uses <a> and </a> tags • Three types of links: ▫ E-mail links ▫ Internal links ▫ External links • mailto word <a href=“mailto:[email protected]”>Collier</a> E-mail links • mailto word <a href=“mailto:[email protected]”>Collier</a> Internal <a href= Links “menu.htm”>here</a> External Links <a href= “http://www.yahoo.com”>Yahoo!</a>