Download
1 / 17
180 likes | 550 Views
Introduction to HTML Part I Core 5.1 Brooklyn College Natalia Mosina - 2005 WWW and Browsers We already know that users can search the World Wide Web using an interactive application program called a browser.
E N D
Introduction to HTML Part I Core 5.1 Brooklyn College Natalia Mosina - 2005
WWW and Browsers • We already know that users can search the World Wide Web using an interactive application program called a browser. • Browser loads any page at your request (whenever you type the whole URL into the browser’s address bar or when you click on a hyperlink on the current page). • A Page is a hypermedia document available on the Web. • Homepage is the root page for an individual or an organization.
WWW and Browsers • HTML – Hypertext markup language. • HTML is the underlying language of the Web design. • It allows an author to identify different features (formatting) of the page and the page content. • Note: the same page can be displayed differently by the two different browsers since the browser handles the page’s final formatting.
Universal accessibility of Web documents (as opposed to others) • Observation: With a word-processor you get total control over the physical layout of the document. But if you access a word processing file on a different computer, it may not even work at all... • Fact: In order to use the file on another computer, it has to be a similar platform (PC/MAC), use a similar operating system, use an appropriate version of the software.
Universal accessibility of Web documents (as opposed to others) • Web pages are designed to be accessible world-wide, regardless of the type of hardware or software used on the client machine. • The person designing the Web page has no control over the type of computer it will be viewed on. • Therefore, the formatting of Web pages is done in such a manner that the content and logical design of the page should be constant, although the physical layout of the page may differ. • You can look at the document source (View > Page Source ). Note: it is a plain text with extra tags.
HTML I • HTML uses tags to instruct the browser how to display the text on the screen. Most tags come in pairs, one before the text on which they work, and one immediately after. • The first line of a file to be displayed as a Web page is < HTML > ; the last line of the file is < /HTML > • A Web page is typically divided into two parts - the HEAD and the BODY. The HEAD is delimited by < HEAD > and < /HEAD >, the BODY by < BODY > and < /BODY > .
General form of an HTML document Opening tag <html> <head> <title> Title of the document </title> </head> <body> Content of the page goes here </body> </html> Displayed on The title bar of A page!!! Head Section Title is not A heading!!! Body Section Corresponding Closing tag HEAD section has nothing to do with headings. (This is a very confusing point!)
First Hands-On Experience(type the following in a Notepad) <html> <!-- You can write your comments here --> <!-- Comments are ignored by the browser and are not displayed --> <head> <title> Title of the page goes here </title> </head> <body> Text that appears on the page goes here. Text that appears on the page goes here. </body> </html>
Viewing your page in the browser. • Save the file as Demo1.htmlFile type must be set to "All Files" and that it should be named something.htm or .html - also don't use blanks in the file name. • Open the file in the browser, by choosing Open File on Netscape, or Open > Browse on Explorer. Or just locate the file and double-click it. • Notice that the title is in the title bar, not inside the browser window. The text is not displayed on separate lines as you typed it in, but is reformatted into one paragraph. • You can resize the window to see how the text is reformatted to fit nicely in the space provided.
The text is not displayed on separate lines as you typed it in Title is in the title bar, not inside the browser window.
Reloading • Keep your Notepad window and the Browser showing your page opened. • Add another line to the Body section of your Demo1.html file. • Save the file. • Your Browser doesn’t show any changes. • Click Reload/Refresh button on the Standard Bar. Now you can see changes.
Basic Formatting • As you have noticed, any spacing or line breaks in the HTML file is ignored by the browser when the text is displayed on the screen. • In order to insert a new line, we must use the < BR /> tag which inserts a line break. • This tag has no closing pair; to indicate this, the tag has / inside brackets.
Basic Formatting • The paragraph tag, < P > </P>,is used to break the text into paragraphs. • If we want some text to appear in bold face, we use the < B > and < /B > tags around the text, for example: • < B > This will appear in bold face< /B > . • To display text in italics, we use < I > and < /I > around the text. • It is poor style to use underlining in Web pages because of the confusion with hyperlinks. (but you can do it using <U> and </U> tags.
What appears after <br /> tag Will go to the new line New paragraph Center alignment Bold and italic What appears after <br /> tag Will go to the new line
Headings are not Titles. <h1></h1> Big <h2></h2> Medium <h3></h3> Small … <h6></h6> Smallest Horizontal line Lists: <ul></ul> unordered list <ol></ol> ordered list <li></li> list item (must put for each item of the list)
