Download presentation
Presentation is loading. Please wait.
1
Intro to HTML – Part IV Organizing your page into sections using div
Hyperlinking images Entity codes Remote vs Local Computers
2
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
3
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!
4
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.
5
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.
6
* 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.
7
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.
8
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.
9
Example of ‘div’ in action
<body> <div id="header"> <h1>Turtles Are Us</h1> </div> <div id="tagline"> For all your terrapine needs. <div id="main_content"> Thank you for visiting our site. We hope that you will find everything that….. <div id="footer"> <a href=“contact.htm”>Contact Us</a> <br> <a href=“faq.htm”>FAQ </a> <br> < a href=“shipping.htm”>Shipping </a> </body>
10
Also note the use of whitespace in this document!
<body> <div id="header"> <h1>Turtles Are Us</h1> </div> <div id="tagline"> For all your terrapine needs. <div id="main_content"> Thank you for visiting our site. We hope that you will find everything that….. <div id="footer"> <a href=“contact.htm”>Contact Us</a> <br> <a href=“faq.htm”>FAQ </a> <br> < a href=“shipping.htm”>Shipping </a> </body> The content inside div is indented. Added a blank line between each div. Tried to make things a bit easier to read, and just “cleaner” by lining up the ‘br’ tags.
11
Compare… <body> <div id="header"> <h1>Turtles Are Us</h1> </div> <div id="tagline"> For all your terrapine needs. <div id="main_content"> Thank you for visiting our site. We hope that you will find everything that….. <div id="footer"> <a href=“contact.htm”>Contact Us</a><br> <a href=“faq.htm”>FAQ </a><br> < a href=“shipping.htm”>Shipping </a> </body>
12
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.
13
Hyperlinking an Image An image can be “clickable”. That is, images may be turned into hyperlinks. <a href=" <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.
14
Practice Time Practice the following until you get to the point where you can type the HTML code from memory: Inserting images Creating hyperlinks Hyperlinking images Your goal is to be able to create the following page without referring to your notes: Download an image from the web on a favorite musician, sports team, hobby, etc. Then create a very short HTML document in which you talk about it. Have the image link to the wikipedia web page about the topic.
15
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.
16
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.
17
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.
18
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
19
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
20
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: A few examples are provided on the next slide.
21
A Few Entity Codes non-breaking space < < >
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©
22
The Chicago Cubs<sup>©</sup>
Using an entity code to display a symbol: The Chicago Cubs<sup>©</sup> (Can you guess the purpose of the <sup> tag?)
23
* 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.
24
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.
25
< / Lecture>
Similar presentations
