Source of the Page
In the last lesson, we learned that looking at a word processor file through Terminal and Word was different. The same goes for web pages.
- View a web page from Firefox, right click and select “view page source”
- Do you see the relationship between the source and the actual page?
The file that is actually saved in the computer as a webpage is the source. The webpages you usally see are pages that have been analyzed and converted by the browser, so it is readable for humans.
A file that is waiting to be processed (not only HTML files) is called the source file.
In the case of webpages, the source is written in a language called HyperText Markup Language(HTML). Let’s try making a simple webpage.
- Start-up the text editor, write the following, and save the file as ex02-2.html.
- Open the file via browser.
- You can open the file by double clicking.
- If Safari starts up, make the default browser Firefox by clicking preferences, select the Advanced panel, click the General tab and then under the System Defaults section, click the “Check Now” button.
- If mi starts up, drag and drop the file icon on Firefox. You can also right click the file, click on “open with”, and select Firefox.
- If no applications start-up, make sure the filename extension is “.html”.
- The content of the file should come up, but all the letters are the same size and shape, and ins’t COOL. Let’s try editing the file like the following.
- Save the file, and reload the page.
- Let’s make “foo bar” and “abcdefg” into a list. Edit the file like the following.
- Save the file, and reload the page.
- There are many rules and restrictions to HTML. Almost any browser would display the page with no problems, but let’s write it correctly.
XHTML123456789101112131415<html><head><meta charset="utf-8"><title>Exercise02-2</title><body><h1>test</h1><ol><li>foo bar</li><li>abcdefg</li></ol></body></html>
- Edit the page to match the code above, save the file, and reload the page.
There are many differences between opening a file with a text editor and a browser. Looking at a HTML file through a browser is like watching a stage from the auditorium, and the other way around for a text editor. When looking at the auditorium from stage, you can see all of the gimmicks that make up the stage.
HTML is a type of “Markup Language”. A markup language is a language that annotates text so a computer can analyze it. The difference from a word processor is, a markup language annotates text while writing the file, so the complete form is only viewable after the file is made up
- The <h1></h1> on the both sides of “test” isn’t displayed, but indicates that the text in between is a heading
- The browser analyzes this instruction, and displays “test” in large letters.
Grammar of HTML
Elements and Tags
The annotations of HTML represent the structure of the webpage. Every sentence that is devided by an annotation is called an “element”. For example, a header or table is an element.
There are times when a element is included in another element. For example, there is an item element (li) inside a list element (ol). The webpage itself is a html element, and every other elements are included inside the html element.
An element is partitionated by tags. For example, <ol> and <li> are tags. A keyword surrounded by “<>” is called a tag.
Every element has an opening tag and a closing tag. For example, a header element (h1) starts with a opening tag<h1>, and ends with a closing tag </h1>. When writing a closing tag, a “/” is put before the element name.
Some elements don’t have closing tags. For example,
<meta charset="utf-8"> is a meta element by itself.
An attribute can be written in an opening tag to provide additional informaion to elements. Multiple attributes can be declared by seperating each attribute with a space. In the case of
<meta charset="utf-8">, “meta” is the element name, “charset” is an attribute, and “utf-8” is the value of the attribute. The available attributes depend on the element.
- What kind of elements are there in the HTML file we made in Exercise02-2? Divide each element into boxes.
XHTML1234567891011121314151617<!DOCTYPE html><html><head><meta charset="utf-8"><title>Exercise 02-2</title></head><body><h1>Test</h1><ol><li>foo bar</li><li>abcdefg</li></ol></body></html>
<!DOCTYPE html>on the first line is a declaration, not an element. This declaration shows that the file is following the grammers of HTML5. A browser first reads the declaration and analyzes the file according to the grammers of the declaration.
Indentation and Comments
Browsers don’t read line breaks, so if you want to start a new line, you must type in a paragraph tag <p> or line break tag <br>.
When creating a webpage, there are times when you’d want to write a comment that doesn’t show up on a browser. In such a case, a comment tag “<!– –>” is used. Text written between a comment tag doesn’t show up on browsers.
Different Kinds of Elements
There are many types of HTML elements, and is almost impossible to remember all of them. Instead, let’s learn how to search tags when you need them.
- Search the following elements by using HTML Reference
- unordered list
- ordered list
- Start-up the text editor, make a new file, and write the following. We will use this file again, so let’s name it
XHTML12345678910111213<!DOCTYPE html><html><head><meta charset="utf-8"><title>Self Introduction</title></head><body>Introduce yourself in this space</body></html>
- Tag “Introduce yourself in this space” with a comment tag, and make sure it ins’t displayed on the browser.
- Write the following inside the body tag.
- Make a headline Ex. “Keio Taro’s Self Introduction”
- Make a list of the elementry school, junior highschool, and highschool you graduated from
- Make a definition list of your favorite book or music.
- Make a table of your class schedule.
- Read the reference and write an html file that is displayed like the following.
This class is Fundamentals of Information Technology, and is
.tfel ot thgir morf nettirw eb ot desu esenapaJ
The input tag specifies an input area where users can enter data.
- Webpages have many types of inputs, and most use input elements. The type of input element can be specified by the “type” attribute. Make a new file, name it ex02-6.html, and write the following.
XHTML12345678910111213<!DOCTYPE html><html><head><meta charset="utf-8"><title>Exercise 02-6</title></head><body><p>Text input：<input type="text"></p></body></html>
- The width of the textbox is specified by the “size” attribute. Edit the file and adjust the textbox to 50 letters.
- Search using HTML <input> type Attribute page of the reference,and create a password input box, number input box, checkbox, and a button.
- To display a text for the button, change the “value” attribute of the “input” element.
How to use Inspector
Firefox has a tool that displays the relationship of HTML and the actual screen. Click on Tools→Web Developer→Inspector
- By moving the cursor when the inspector is in use, you can see which part of the HTML actually corresponds with the screen.
- There is a function that displays the overlap of elements in 3D.
- What is HTML used for?
- What is the difference between a word processor and a mark-up language?
- What is the relationship between elements and tags?
- How do you make an ordered list?
- How do you make a button?