Anatomy of a URL - DePaul University
Download
Report
Transcript Anatomy of a URL - DePaul University
Intro to HTML – Part IV
Organizing your page into sections using div
Hyperlinking images
Entity codes
Remote vs Local Computers
Learning Objectives
By the end of this lecture, you should be able to:
–
–
–
–
–
Identify the organization responsible for creating the “rules” of the web
Organize your page into sections using div tags
Hyperlink images
Use entity codes to display non-standard characters
Explain what is meant by ‘uploading your file to the server’ and the
name of the tool used to accomplish this task.
– Explain what is meant by a local v.s. remote computer
HTML 5 and Standards
• The WWW Consortium (W3C) is the group that establishes the “rules” of
HTML and related standards.
• HTML 5 is a fairly significant change but this standard has not yet been
universally adopted/required among HTML developers and browsers.
– However, it will be adopted—it’s only a matter of time!
– As of 2017, nearly all browsers conform to this standard.
• For this reason, this course will be taught using the HTML 5 rules and
standards.
• Because HTML-5 is not universally implemented across all browsers, it is
vital that you test your pages using a modern browser. As long as you have
updated your browser within the last 3-4 months, you will be fine.
– I recommend using Firefox as that is what the grader will be using to grade
your assignments!
Reminder: “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
Reminder: Place all paragraphs in a ‘p’ tag
• It is a very good idea to place all paragraphs of content in between <p>
and </p> tags.
• This allows you to apply formatting inside that p tag, and also positioning –
such as moving your paragraph to another position in the window.
– We will discuss positioning later on in the course.
5
* Organizing your document using the ‘div’ tag
• The div tag is typically used to divide your page into meaningful sections.
• An example of commonly used sections:
–
–
–
–
Header (e.g. logo + Company Name)
Tagline (e.g. company slogan)
Navigation (e.g. table of contents)
Footer (e.g. contact information)
However as we progress, we will see that this tag becomes extremely useful and
important when it comes to applying visual styles ot your page as well as for
scripting in JavaScript.
div Tag Continued
• So, the div tag is used to help divide your page into sections.
• It is possible (and common) to have several tags (p, a, h, etc)
inside a given div section.
– However, the opposite does not apply: you will not typically include a
div tag inside other tags.
Use an ‘id’ attribute with div tags
• Assigning an “identifier” to each div section will turn out to be very
important.
• We assign an identifier using an attribute called “id”.
• We will discuss the use of this attribute in more detail later. For now,
simply get in the habit of including this attribute with every div tag.
• The value of the ‘id’ attribute must be unique to every tag on your page.
That is, no two tags in a single web document should have the same id
values.
• Choose your id values carefully. Be sure they describe the purpose of that
div section.
Example of ‘div’ in action
<body>
<div id="header">
<h1>Turtles Are Us</h1>
</div>
<div id="tagline">
For all your terrapine needs.
</div>
<div id="main_content">
Thank you for visiting our site. We hope that you will find everything that…..
</div>
<div id="footer">
<a href=“contact.htm”>Contact Us</a>
<a href=“faq.htm”>FAQ </a>
< a href=“shipping.htm”>Shipping </a>
</div>
</body>
<br>
<br>
Also note the use of whitespace in this document!
<body>
<div id="header">
<h1>Turtles Are Us</h1>
</div>
The content inside div is indented.
<div id="tagline">
For all your terrapine needs.
</div>
Added a blank line between each div.
<div id="main_content">
Thank you for visiting our site. We hope that you will find everything that…..
</div>
<div id="footer">
<a href=“contact.htm”>Contact Us</a>
<a href=“faq.htm”>FAQ </a>
< a href=“shipping.htm”>Shipping </a>
</div>
</body>
<br>
<br>
Tried to make things a bit easier
to read, and just “cleaner” by
lining up the ‘br’ tags.
Compare…
<body>
<div id="header">
<h1>Turtles Are Us</h1>
</div>
<div id="tagline">
For all your terrapine needs.
</div>
<div id="main_content">
Thank you for visiting our site. We hope that you will find everything that…..
</div>
<div id="footer">
<a href=“contact.htm”>Contact Us</a><br>
<a href=“faq.htm”>FAQ </a><br>
< a href=“shipping.htm”>Shipping </a>
</div>
</body>
Example
•
Compare the original version of our french_indian_war.htm file with the
version that has been organized into div sections:
french_indian_war_divs.htm
•
Important: Note that the div tags do NOT in any way change the way the page looks.
The div tags are all about organizing your document into sections and for applying
visual styles and scripts as we will discuss later in the course.
Hyperlinking an Image
An image can be “clickable”. That is, images may be turned into
hyperlinks.
<a href="http://www.chicagocubs.com">
<img src="cubbies.jpg" alt="Cubs logo" />
</a>
See: mozart.htm
Important: Don’t forget to also save the file mozart.jpg to your hard drive
and to place it inside the same folder as the mozart.htm document.
13
Practice Time
Practice the following until you get to the point where you can type the HTML
code from memory:
1. Inserting images
2. Creating hyperlinks
3. Hyperlinking images
Your goal is to be able to create the following page without referring to your
notes:
1. Download an image from the web on a favorite musician, sports team,
hobby, etc.
2. Then create a very short HTML document in which you talk about it.
3. Have the image link to the wikipedia web page about the topic.
Sneak peak of CSS: Image Borders
By default, clickable images have blue borders. The old (deprecated)
way to remove the border, is to set the border attribute inside the img
tag to 0.
<img src="photo.jpg" alt="Pic" border= "0"/>
Here is the proper way to do it, using CSS:
<img src="photo.jpg"
alt="Pic" style="border-style:hidden" />
•
•
Incidentally: Note how the above lines of HTML code span more than one line – this is perfectly fine!
Remember that browsers ignore extra whitespace and in this case the extra line means that the code is
considerably easier to read.
Also: I have demonstrated the use of the “self closing tag” with the ‘/’ character. Again, these are not
required, but some people like to use them.
15
Borders – A design thought:
Consider how we removed the border in the last slide. Do you think is a
good idea or not?
In my opinion, it would be a good idea to keep the border if the image is hyperlinked.
Most users familiar with the web will realize, even if only subconsciously, that the image is
‘clickable’ if they see the box around it.
16
Images: Bandwidth limitations
Image files consume more bandwidth than text files since they
are usually considerably larger.
Users who access the Internet via slower connections will have
to wait (sometimes for quite a while).
Try to avoid/minimize use of large images.
17
Images: Using thumbnails
If you do want to make larger images available, use thumbnails, which
are reduced versions of your images, and hyperlink the thumbnails
to the larger versions.
<a href="larger_photo.jpg" alt="large photo">
<img src="smaller_photo.jpg" alt="small photo">
</a>
In this example, the image ‘smaller_photo’ is initially displayed, but is also hyperlinked to
the image ‘larger_photo’. If the user clicks on the initial image, the larger one will then
display.
Several freeware and shareware graphic programs can create thumbnails
18
Images: Rescaling images
Rescale the image by changing its WIDTH and HEIGHT attributes.
<img src="mozart.jpg" height="100" width="100"
alt="Picture of Mozart" >
Preserve the aspect ratio (height-to-width ratio) otherwise the image gets
distorted. Divide or multiple the dimensions by the same factor. In the
example above, the image of Mozart is 300x300, so here we have reduced the
display on the screen to 1/3 its original size.
Scaling down an image DOES NOT reduce its file size (bandwidth
requirements). To reduce the file size, you need to compress the image.
Try it at W3Schools
19
Special Characters
aka “Entities”
• Suppose you wanted to insert the copyright symbol – how would
you do it?
• Suppose you wanted display the ‘>’ symbol on a web page – how
would you do it?
– Recall that this symbol will make some browsers think you are about to
create a tag.
• Answer: There are special codes you can use to display characters
that are either not available on conventional keyboards, or are
reserved because they are used as HTML syntax.
– Instead, you can use special symbols to display such characters.
– Look up “HTML Entities” in an HTML reference to see a detailed list.
• W3 Schools: http://www.w3schools.com/tags/ref_entities.asp
– A few examples are provided on the next slide.
20
A Few Entity Codes
Code name
Code
Symbol
 
non-breaking space
<
<
<
>
>
>
&
&
&
©
©
©
®
®
®
@
@
For some entities, in addition to the numeric entity codes, the W3C has given us
“friendlier” versions that can also be used.
Chicago Cubs©
Chicago Cubs©
21
Using an entity code to display a symbol:
The Chicago Cubs<sup>©</sup>
(Can you guess the purpose of the <sup> tag?)
* Basic process for creating web pages, contd:
File Transfer Protocol (FTP)
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)
New: Upload your file(s) to the server
– When you create a web document, you will be working on a computer
at home, on a laptop, etc. This means that the file is NOT yet
available on the internet. To make it visible on the web, you must first
copy that file to the web server.
– There is a tool used to move the file from the computer in front of you
to another computer (e.g. a web server) located elsewhere on the
internet. This tool is called “File Transter Protocol” or “FTP”.
– Any and all files you wish to make available on the web such as images
or videos or PPTs, etc, etc, must also be to the web server.
23
Begin by working with your files locally:
• Create your HTML document and
test/edit/modify as needed on the
computer in front of you.
– We typically refer to the computer in front of
you as the “local” computer.
• Click on File Open and navigate to
your file. Or, simply type the name of
the file in the URL box.
• Once you are happy with the version on
your computer and are ready to make go
live on the web, you must upload it to
the server.
– We typically refer to the computer you are
moving your file(s) to as the “remote”
computer.
< / Lecture>