Introduction to html part i
Download
1 / 17

Introduction to HTML Part I - PowerPoint PPT Presentation

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.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha

Download Presentation

Introduction to HTML Part I

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


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)


ad
  • Login