No.2 HTML

HTML

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.

Exercise 02-1(☆)
  1. View a web page from Firefox, right click and select “view page source”
  2. 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.

Exercise 02-2(☆)
  1. Start-up the text editor, write the following, and save the file as ex02-2.html.
  2. 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”.
  3. 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.

  4. Save the file, and reload the page.
  5. Let’s make “foo bar” and “abcdefg” into a list. Edit the file like the following.

  6. Save the file, and reload the page.
  7. There are many rules and restrictions to HTML.  Almost any browser would display the page with no problems, but let’s write it correctly.
  8. 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.

Markup Language

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.

Elements

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.

cn13

Exercise 02-3(☆☆)
  • What kind of elements are there in the HTML file we made in Exercise02-2?  Divide each element into boxes.

To be percise, the <!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.

Exercise 02-4(☆☆☆)Search the following elements by using HTML Reference
  1. Search the following elements by using HTML Reference
    • paragraph
    • header
    • unordered list
    • ordered list
    • table
  2. Start-up the text editor, make a new file, and write the following.  We will use this file again, so let’s name it  introduction.html.
  3. Tag “Introduce yourself in this space” with a comment tag, and make sure it ins’t displayed on the browser.
  4. 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.
Exercise 02-5(☆☆☆☆)
  • Read the reference and write an html file that is displayed like the following.

    x2+y2=z2
    This class is Fundamentals of Information Technology, and is boring very interesting.
    .tfel ot thgir morf nettirw eb ot desu esenapaJ

The current version of HTML is 5.  You may find articles with old HTML elements, but these elements will be unusable in the future, so let’s use HTML5 elements if possible.

input elements

The input tag specifies an input area where users can enter data.

Originally, the input element is a part of the form element, but it can be used independently.

Exercise 02-6(☆☆☆)
  1. 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.
  2. The width of the textbox is specified by the “size” attribute.  Edit the file and adjust the textbox to 50 letters.
  3. 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.

Buttons and textboxes from the exercise above don’t have any functions, so nothing happens even if you input data.  To add a function, we must use a different language called “JavaScript”.  On the second half of the semister, we will study “Javascript” and process some data.  In Fundamentals of Information Technology 2, we will study how to send and process data on a server.

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.

Points to Check
  • 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?