No2. HTML

HTML

Source of the Page

In the last lesson, we learned that looking at a word processor file through Terminal and Word was totally different.  The same goes for web pages as well.

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.  Webpages that you usually see are those that have been analyzed and converted by the browser, so they are readable for humans.

A file that is going to be processed (not only HTML files) is called a 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. The name of the file could be anything but it has to finish with “.html”. For example, let’s put 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.  If you write like above, almost any browser would display the page with no problems, but let’s write it correctly.
  8. Edit the page as the code above, re-write “foo bar” and “abcdefg” in any words that you like. Then save the file, and reload the page.

It is very different 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. On the other hand, looking through text editor is like watching it from the offstage and 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 analyse it.  The difference from a word processor is that while a word processor   annotates the text while writing the file, a markup language embeds the command in the text so the completed 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 analyses this instruction, and displays “test” in large letters.

Grammar of HTML

Elements and Tags

The annotations of HTML represent the structure of the text.  Every text that is divided by an annotation is called an “element”. For example, a header or table is an element.

There are times when an element could be 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 partitioned 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 information to elements.  Multiple attributes can be declared by separating 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 precise, the <!DOCTYPE html> on the first line is a declaration, not an element.  This declaration shows that the file is following the grammars(syntax) of HTML5.  A browser first reads the declaration and analyses the file according to the grammars(syntax) of the declaration. If the page is written in different version of HTML or XHTML, the declaration will be different too.

Indentation and Comments

Browsers do not 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 would want to write a comment that doesn’t show up on a browser.  In such a case, a comment tag “<!–” and ” –>” is used.  Text written between a comment tag does not show up on browsers.

Different Kinds of Elements

There are many types of HTML elements, and it is quite hard to remember all of them.  Instead, let’s learn how to search tags as needed.

Exercise 02-4(☆☆☆)
  1. Search the following elements by using HTML Reference
    • paragraph
    • header
    • unordered list
    • ordered list
    • definition list
    • table
  2. Make a new file with the text editor, 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 check that it is not displayed on the browser.
  4. Write the following inside the body tag and check it on a browser.
    • A headline. Ex. “Keio Taro’s Self Introduction”
    • List of the elementary school, junior high school, and high school you graduated from
    • List of your favourite book or music with the description tag
    • Table of your class schedule
Exercise 02-5(☆☆☆☆)
  • Read the reference and write an html file that is displayed like the following.

    x²+y²=z²
    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

Web page does not only display data, but also it can process some work by entering data. The input tag displays an input area where users can enter letters or buttons that can be clicked with the mouse.

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, but most likely input elements is used.  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 “text box” is specified by the “size” attribute.  Edit the file, write the size attribute in input element and adjust the “text box” 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.
    • In order to display a text in the button, change the “value” attribute of the “input” element.

Even if you input data in “text boxes” or click buttons nothing happens. In order to make a movement after the data is input, it is required to use a different language. On the second half of the semester, we will study “Javascript” and learn how to process some data.  In Fundamentals of Information Technology 2, we will study how to send and process data on a server.

How to use  Source Viewer (for Chrome)–recommended

When opening a web page or html file using a web browser (Chrome in this case) you can view the source (html) file  .  Click on View→Developer→View Source.

How to use Developer Tools (for Chrome)–recommended

When the structure of the webpage gets complicated, it will be hard to recognise why it turns out to be displayed in such a way. Chrome has a tool that displays the relationship of HTML and the actual screen.  Click on View→Developer→Developer Tools, then click on “Elements” tab.

  •  By moving the cursor when the Developer Tools is in use, you can see which part of the HTML  actually corresponds with the screen.
    Later on when we start using JavaScript you will find Developer Tools (Debugger) will be your “best friend” in debugging your JavaScript code , by using the “Console” tab.

How to use Inspector (for Firefox)–for reference only (we recommend Chrome for this class)

When the structure of the webpage gets complicated, it will be hard to recognise why it turns out to be displayed in such a way. 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 markup language?
  • What is the relationship between elements and tags in HTML?
  • How do you make an ordered list in HTML?
  • How do you make a button in HTML?