the world wide web html basics l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
How we access web pages: PowerPoint Presentation
Download Presentation
How we access web pages:

Loading in 2 Seconds...

play fullscreen
1 / 34

How we access web pages: - PowerPoint PPT Presentation


  • 151 Views
  • Uploaded on

A web client (e.g. Internet Explorer, Firefox, Safari) makes an HTTP request to a specific web server. ... It is an address that specifies the location of a file on the Internet. ...

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

PowerPoint Slideshow about 'How we access web pages:' - Kelvin_Ajay


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
the world wide web html basics
* The World Wide Web

* HTML Basics

Internet 1: The World Wide Web

how we access web pages
How we access web pages:

The web uses the client-server model of networking:

  • A web client (e.g. Internet Explorer, Firefox, Safari) makes an HTTP request to a specific web server.
    • Typically this is a request for a specific HTML file
  • The web server receives the request and sends back the requested document (which is usually an HTML page).
  • The web client interprets the information returned by the server (e.g. the HTML code) and displays it appropriately.
how to serve web pages
How to ‘serve’ web pages:
  • Dedicate a computer to act as a ‘server’ to send pages to web clients (browsers) when requested.
  • Install server software that can respond to requests for documents by ‘serving’ them to the requesting computer.
  • Create and upload the appropriate documents that you wish to make available on the web.
serving web pages the server
Serving web pages – The Server:

Have a computer to act as a ‘server’ to send pages along when requested:

A server can be any computer capable of connecting to the internet and running web-server software.

  • The busier the site, the more powerful the computer. However the server can be as simple as your Dell desktop, or as complex as a rack of high-end dedicated computers.
  • Busy sites (e.g. Google, Microsoft) will have multiple redundant computers to serve their web pages.
serving web pages the server software
Serving web pages – The Server Software:
  • A web server application (software) listens (constantly) for HTTP requests and responds by sending back HTTP responses.
    • This response is usually in the form of an HTML document.
    • Other files may also be sent (e.g. PPT files, etc)
  • Several software companies publish web server software
    • Some of the best known include: Apache, Microsoft IIS (internet information services), Tomcat
web clients
Web clients
  • Software that is capable of sending out HTTP requests and interpreting HTTP responses.
    • Recall that HTTP responses are usually (but not always) sent in the form of HTML documents.
    • The most popular web-clients: Internet Explorer (Microsoft), Firefox (Mozilla), Safari (Apple)
slide7
HTML

HTML = HyperText Markup Language

HyperText

text containing navigable links to other texts

A Markup Language

a method of adding information to the text indicating the logical components of a document and instructions for layout of the text on the page, which can be interpreted by some automatic system

You can see the HTML of most web pages by selecting View>>Source on your web browser.

html the language of the web
HTML: The Language of the Web

Web pages are text files written in HTML.

HTML is easy to write and even nonprogrammers can learn to use it.

HTML describes the format of web pages through the use of tags.

Web browsers read the HTML file, interpret the HTML tags, and render (display) the web page accordingly

creating web pages
Creating Web pages

In order to create your own web pages using your own HTML you need:

A text editor (e.g. Windows Notepad) – NOT a word processor!

An web browser for testing the pages(e.g. Firefox, Internet Explorer, Safari, Opera, Chrome – or test with ALL of them!)

A web server to store your files and make them available online (students.depaul.edu)

basic process for creating web pages
Basic process for creating web pages

Write HTML file

text file (i.e. do not write in Word)

name the file extension .html or .htm

View on your local machine (File  Open)

Upload to server

Beyond the scope of this course

See IT-130, HCI-201

Images: must also be uploaded

All images should be in either .gif or .jpg formats

basic html terminology
Basic HTML Terminology

Content

the parts of the HTML file that the user reads and sees (text, images, sounds, video, etc)

Tags

HTML codes that control document appearance

e.g. <p>, <br>, <img src="picture.jpg">, etc

Attributes

properties associated with a tag

e.g. <img src="picture.jpg" width="50" height="50">

Entities

specially-coded characters

e.g. &nbsp;

our first html tags document tags
Our first HTML Tags: Document tags

<html> … </html> Mark the beginning and end of the HTML file.

<head> … </head> Text in this part of the document is NOT displayed in the browser’s window. It may include other tags like <title> and <meta>.

<title> … </title> Displayed in the browser’s title bar. It is used as the default bookmark description.

<body> … </body> The contents displayed in the browser’s window.

Everything that appears on the page is contained within these tags.

outline of an html page
Outline of an HTML page:
  • <html>
  • <head>
  • <title>My first web page</title>
  • </head>
  • <body>
  • Hello world!
  • </body>
  • </html>
  • N.B.:
  • Every web page should have the document tags <html>, <head>, <title>, <body>
  • Every tag has a corresponding closing tag
the heading tag
The “Heading” tag

Headings: <h1> … </h1>  boldest and largest

<h2> … </h2>

<h3> … </h3>

<h4> … </h4>

<h5> … </h5>

<h6> …. </h6>  lightest and smallest

more tags
More tags
  • Line Break: <br />
  • Horizontal rule: <hr />
  • Ordered lists: <ol> … </ol>
  • Unordered lists: <ul> … </ul>
slide16

Example

<html>

<head>

<title> A Practice Web Page</title>

</head>

<body>

<h1>Important! (This is an H1)</h1>

<h3>Spacing test (this is an H3)</h3>

I just left a blank line, but it doesn’t appear!

</body>

</html>

a few style tags
A few ‘style’ tags

Emphasis

<em> </em>

rendered as italic

Strong

<strong> </strong>

rendered as bold

Center

<center> </center>

Underlined

<u> </u>

Many others…

begin by working with your files locally
Begin by working with your files locally:
  • Create your HTML text and view it in your browser before uploading them to your web account.
  • Click on File  Open and navigate to your file. Or, simply type the path and name of the file in the URL box.
summary on uploading html files
Summary on uploading HTML files

Write the HTML file

View your resulting page in a web browser

Edit as needed

Transfer the HTML file to a web server.

common elements seen in web pages
Common elements seen in web pages:

Most HTML pages contain at least some of the following types of tags:

  • Links (hyperlinks, email, etc.)
  • Images
  • Tables
  • Lists (bulleted, numbered, etc.)
  • Lines (horizontal rules)
lists
Lists

NL Standings

Cubs

Brewers

Cardinals

Astros

Reds

Pirates

Chicago Sports Teams

  • Hawks
  • Cubs
  • Bears
  • Bulls
  • Fire
two types of lists
Two types of lists

Unordered list <ul> </ul>

  • Item 1
  • Item 2

Ordered list: <ol> </ol>

  • Item 1
  • Item 2
unordered lists
Unordered lists

An unordered list (a.k.a. a bullet list) is created with the tag pair <ul> … </ul>.

Each item in the list is created with the tag pair <li> … </li>.

This produces an indented list with a default character (usually a small diamond) in front of each item.

example
Example

<html>

<head>

<title>Example Title</title>

</head>

<body>

<h1>Here is an example of a list</h1>

<ul>

<li>One item </li>

<li>Another item </li>

</ul>

<ul style="square">

<li>Another item </li>

<li>Another item </li>

</ul>

</body>

</html>

  • First item
  • Second item
  • Third item
  • Fourth item
ordered lists
Ordered lists

An ordered list is created with the tag pair <ol>… </ol>. Each item in the list is created with the tag pair <li> … </li>.

This also produces an indented list but the items are numbered. The default is to number with 1, 2, 3, 4, . . .

example26
Example

<html>

<head>

<title> Example Title</title>

</head>

<body>

<h1>Here is an example of a ordered list </h1>

<ol>

<li>First item </li>

<li>Second item </li>

</ol>

</body>

</hmtl>

  • First item
  • Second item
the anchor tag creating hyperlinks
The Anchor Tag:Creating hyperlinks

One of the most important tags in HTML.

<a> … </a> tags are used to create hyperlinks to

  • to external web sites
  • other documents in the same web site
  • to different locations in the same document (see course web page – weekly schedule links)

** The attribute href indicates the destination of the link:

<a href="address">clickable text</a>

some anchor tags
Some Anchor Tags

<a href="http://www.nytimes.com">New York Times</a>

The text ‘New York Times’ is hyperlinked.

<a href="http://chicagocubs.com"><img src="cubs_logo.jpg"></a>

The image of the Cubs logo is hyperlinked.

Don’t forget to close the hyperlink tag!

What would happen if you forget?

url web address
“URL” = Web Address
  • URL: Uniform Resource Locator. It is an address that specifies the location of a file on the Internet.
  • That is if someone says to you: “What is the URL of that page?”, they are asking you for the web address.
      • E.g. http://www.nytimes.com
      • http://students.depaul.edu/~login_name
horizontal line
Horizontal line

The tag for creating a horizontal line is <hr />.

You can use horizontal lines to improve the appearance of your web page and to delineate sections.

inserting images
An image is inserted using the img tag:

<imgsrc="name of image file" />

Note the use of the end ‘/’

Be sure that your image has been copied to the SAME folder as your HTML document.

e.g. <imgsrc=“my_dog.jpg” />

The web page will display the image my_dog.jpg

The file my_dog.jpg must be in the same directory as your HTML page

Inserting images
images bandwidth limitations
Images: Bandwidth limitations

Image files consume more bandwidth than text files since they can be considerably larger.

Users who access the Internet via slower connections such as telephone lines will have to wait for image files that are 100KB or larger

Try to minimize use of images over 100K.

practice
Practice!!
  • Be sure to play around with the various tags we have covered in this lecture.
  • While you do not have to memorize the syntax of the tags, you will be responsible for showing that you understand how to use them.