HTML, CSS and JavaScript

未分類

Goals

In this lesson, we will learn and outline the relationship between HTML, CSS and JavaScript; the three most important elements of the Web. We will explore each one’s unique role in making web pages seamless and dynamic.

This lesson’s objectives are as follows:

  • Understand what HTML is. Understand what you can and cannot do with HTML as well as what you should avoid doing. Also understand what a structured document is.
  • Be able to write simple HTML that is easier to read and execute
  • Publish HTML documents on the Web using SFC -CNS
  • Understand what CSS is. Understand what you can and cannot do with CSS.
  • Understand what JavaScript is. Understand what you can achieve using JavaScript that cannot be achieved using HTML + CSS

The relationship between HTML, CSS and JavaScript

HTML represents the structure of a document

HyperText Markup Language (HTML) is a markup language used in the World Wide Web (now referred to as just the Web) to express content. HTML is for describing the structure of a document. Essentially, HTML does not regulate its representation method (such as enlarging characters, changing colors, etc.) but represents structure in the form of tags. When one sees hyperlinks being used for linking content across the web, it is often a result of a specific function within HTML to link content together.

HTML is organized according to the flow of Standard Generalized Markup Language (SGML). It was released under ambiguous specifications at the time of web development by Sir Tim Berners-Lee in 1989 but has since changed significantly. HTML was  subsequently standardized by the Internet Engineering Task Force (IETF) in 1993, and HTML 1.0 was formulated. However, this specification was kept as an Internet draft, and was never issued as RFC. RFC 1866 issued it as HTML 2.0 in 1995, which was formulated as HTML’s first formal specification. HTML 2.0 was standardized in IETF, but later the newly established World Wide Web Consortium (W3C) was put in charge of standardizing HTML. HTML has since been updated with W3C, HTML3.2, HTML4.0, HTML4.01. HTML 5.1 is now the latest version as of November 2016. Meanwhile, XHTML 1.0 based on HTML 4.01 based on XML was also developed but has since been discontinued.

CSS decorates documents

Cascading Style Sheets (CSS) is a specification for instructing how to decorate each element when displaying a document written in HTML (including printing, reading aloud, braille expression, etc.). For example, you can specify to enlarge the title letters and color important words.

The CSS exists from Level 1 to Level 4, while those with higher levels are lower functionality but upward compatible. They are called CSS 1, CSS 2, CSS 3, and CSS 4, respectively. CSS 1 was formulated in 1996. Currently, the most used is CSS 3, but since it was standardized by modularizing functions based on CSS 2.1, there is no single document describing the so-called “CSS 3 standard”.

JavaScript manipulates documents

With HTML and CSS alone, it is basically impossible to create a page with movement that responds to events such as clicks by users. In order to create such a page, it is necessary to create a program in a programming language called JavaScript. JavaScript is currently the only programming language designed on the premise that it will work with browsers.

JavaScript was first implemented in 1995 in Netscape Navigator 2.0, a Web browser developed by Netscape. After that, it was standardized as ECMAScript by ECMA International, a standardization organization in the telecommunications field in 1997.

As mentioned earlier, JavaScript is almost the only programming language assumed to operate in the browser. Most major Web browsers implement a JavaScript interpreter, which is a mechanism to acquire and execute JavaScript programs from a Web server. In addition, various application programming interfaces (APIs) are defined between the Web browser and users can respond to events such as clicks by the user via the Web browser and acquire sensor information .

HTML Basics

Structure of HTML

The HTML document has the following structure. Here, the part “<! DOCTYPE html>” in the first line indicates that this document is an HTML document, and the second and subsequent lines are the main body of the document.




<meta charset="UTF-8">
<title>Title</title>


Contents

There are start and end tags, except for some tags that have only start tags. There is a rule that the start tag starts with “<” and the end tag starts with “</”.

Start tag to end tag are called elements in HTML. For example, the third to sixth rows are called head elements. Those that only have a start tag are called empty elements and are treated as elements by themselves. The start tag of an element may have an attribute (property). “Lang =” en “” in the second line of the above example and “charset =” UTF – 8 “” in the fourth line are attributes. They are called like lang attribute, charset attribute respectively. The value to the right of the equal sign (=) is called the value of the attribute. These attributes are used to give additional information to the start tag.

Also in the html tag there must be two elements, the head element and the body element. Each of the two elements is the header part of the HTML document (information describing the HTML document itself) and the body part of the HTML document.

There must always be one title element in the head element. Other than that, it can include meta element, base element, etc.

In HTML, elements must always be nested. In the good example below, there is no problem as the start tag and the end tag of tag 1 enclose the tag 2 element. However, in bad cases tag1 and tag2 are staggered and elements are overlapping, and such description can not be done with HTML.

Good Example
<tag1>
<tag2>
</tag2>
</tag1>
Bad Example

<tag1>
<tag2>
</tag2></tag1>

 

Other HTML Elements

Various elements are defined in HTML. We will explain these elements here. Elements introduced here are only a few, and many other tags are defined in the documentation. For details, refer to the documentation of HTML5.

Headings

The elements for assigning headings are h1 to h6 elements. Use h1 element for the biggest headline and h6 element for the smallest headline. For example, in this teaching material, “html, css and javascript” is composed of h1 element, and “1. purpose” is composed of h2 element.

Lists

Use ul and ol elements for bullets. The ul element is an unnumbered bullet, and the ol element is a numbered bulleted list. For each item in a bulleted list, use the li element.

Ordered Lists

<ol>
 	<li>List item 1</li>
 	<li>List item 2</li>
</ol>

Output result

  1. List item 1
  2. List item 2

Unordered Lists

<ul>
 	<li>List Item 1</li>
 	<li>List Item 2</li>
</ul>

Output result

  • List Item 1
  • List Item 2

Paragraphs

To separate paragraphs, use the p element. The part enclosed by the start tag “<p>” and the end tag “</ p>” is one paragraph.

Links

As the name implies, HTML is for creating HyperText, and it is possible to reference (link) another document from one document. To refer to another document from one document, use the <a> element. For the a element, specify the href attribute. Specify the link destination URL as the value of href attribute. For example:

Next class's contents are here: <a href="https://ipl.sfc.keio.ac.jp/text/info2-2017-9/ja/javascript_basics_and_event_model-ja/">JavaScript Basic Event Model</a>

 

HTML and Document Structure

As we have seen above, HTML documents are composed of a combination of elements. Also, HTML has various elements prepared in its specifications. By appropriately using these elements, you can structure the content of the document like a headline, paragraph, bullet, header, article, footer, supplementary information, etc.

Structured documents are easy to handle for computers. Since it is possible to know which part is a headline and which part is a general article, it is possible to mechanically judge an important part. Also, when inserting images and the like, it is also possible to cope with speech etc. by using alternative attributes.

When creating HTML documents, you should always pay attention to the structure of the document.

Web Page Publishing and URLs


Web pages are specified by URL. The URL is large, and it consists of scheme name, host name, and path name. For example, in the URL “https://www.sfc.keio.ac.jp/about_sfc/”, “https” is the scheme name, “www.sfc.keio.ac.jp” is the host name, “/ about _sfc /” Is the path name. Here, “https” represents the protocol for accessing the Web server, and “www.sfc.keio.ac.jp” represents the host name of the Web server. “Https” is what is called HyperText Transfer Protocol Secure (HTTPS), and exactly shows a method of operating HyperText Transfer Protocol (HTTP) on a protocol called Transport Layer Security (TLS). In addition, “/ about _sfc /” indicates the location of the page in the Web server.

In SFC – CNS, files placed in “/ home /~ login name / public_html” are set to be opened to the whole world by the Web server. For example, a file “/ home / ~login name / public_html / hoge.html” is published as a URL “http://web.sfc.keio.ac.jp/~ login name / hoge.html”.

CSS Basics

Style specification and selectors specifying style

To specify a style, set the value of the style property. For example, the property name of the style indicating the size of the character is “font-size”, and on the other hand, the character size is specified as “14 px”. Specifically, it is described as follows.

font-size: 14px

In addition, when specifying multiple styles, they can be specified at once by separating them with a semicolon (;). Also, there is no problem even if there is a semicolon at the end.

font-size: 24px; font-weight: bold;

Selector

When designating styles at once, it is necessary to clarify which element to designate style. A selector is used for this purpose. The selector can make a complicated designation, but the basic one specifies the element name. For example, to specify a style for h5 element, it is described as follows.

h5 {font-size: 24px}

Here, the part of “h 5” in the head is a selector, which indicates that the style is specified for the h 5 element in this example. Also, “{” to “}” is the style applied to the part specified by that selector. In this example, the font size is specified as 14 px. It is also possible to specify multiple styles for one selector as follows.

h5 {font-size: 24px; font-weight: bold;}

In addition, when specifying the same style for multiple elements, it is possible to specify them at once by connecting them with a comma (,).

ol, ul {font-size: 14px;}

Class Selector

In the example above, we explained how to specify styles according to element type. Other than that, you can also specify styles by element’s class attribute.

For example, suppose that you want to turn red letters only for h5 elements whose “class” attribute has “important” specified. In this case, you can specify it as follows. Here, the “.important” of the CSS indicates the value of the class.

HTML
<h5>This is the Heading</h5>
Paragraph
<h5 class="important">This is for important text</h5>
Paragraph
CSS
h5.important {color: red;}
Output Result

This is an ordinary headline


text

This is an important headline

text


Also, you can omit the element name and write as follows. In this case, if “important” is specified for the class attribute, the designation is also reflected on elements other than the h5 element.

HTML
<h5>Heading</h5>
Paragraph
<h5 class="important">Important text</h5>
<p class="important">Paragraph</p>
CSSL
.important {color: red;}
Output Result

 

This is a normal heading

Text

This is an important heading

Important Text


ID and Selectors

If you want to specify a style for only certain elements, you can use the id attribute. Unlike the class attribute, the id attribute must not have an element with the same id attribute in one HTML document.

For example, if you wish to redden a character for only one team for the best award in the list of winners, you can specify as follows. Here, “#mostexcellent” of CSS indicates the value of id.

 

HTML
<dl>
 	<dt id="mostexcellent">Winner</dt>
 	<dd>Team A</dd>
 	<dt>Second Place</dt>
 	<dd>Team B</dd>
 	<dt>Third PLace</dt>
 	<dd>Team C</dd>
</dl>
CSS
#mostexcellent {color: red;}
Output Result
Winner
Team A
Second Place
Team B
Third Place
Team C

Specifying CSS

As mentioned earlier, CSS is for decorating documents written in HTML. For this reason, HTML and CSS are in a master-slave relationship, and it is necessary to specify which CSS to use on the HTML side. There are three ways to specify CSS in HTML. Of these, the former two need to specify both selector and style, and in the third method “How to specify using HTML style elements with style attribute”, only style is specified without using a selector.

How to prepare CSS as a separate file and refer to the file from HTML

In this method, CSS is prepared as a single independent file, and the file is referred to from HTML using the link element. Since the CSS exists as an independent file, it is possible to refer to the same CSS from plural HTML files. With this, even in the case of the Web content composed of a plurality of HTML document files, it is possible to change the decoration method of all the pages at once by changing one CSS file. In CSS file, describe selector and style in combination.

To reference a CSS file from an HTML document, specify it in the head element as follows. Here, “hoge.css” is the file name of the CSS file.

            Referencing CSS files in HTML

...

...
   	<link rel="stylesheet" type="text/css" href="hoge.css">
  ...

...
CSS File (hoge.css) Example
h5 {
font-size: 24px;
font-weight: bold;
}
p {font-size: 14px;}

How to describe CSS within HTML

In order to describe the CSS in the HTML document, use the style element in the head element. Within the style element, describe selector and style in combination. For this reason, you cannot specify styles that span multiple files, but you can specify styles for elements of the same type or elements of the same class at once.An actual description example is shown below.

Specifying CSS with the style element

...

...

<style>
    h5 {font-size: 24px; font-weight: bold;}<br />
    p {font-size: 14px;};<br />
  </style>  ...

...

How to specify HTML elements with the style attribute

For each element of HTML you can specify the style using the style attribute. Since this method specifies a style for each element, even if it is an element of the same type or an element of the same class, it is necessary to specify a style individually for each element.

           Specifying styles with the style attribute

...

...
<h5 style="font-size: 24px; font-weight: bold;">Title</h5>
<p style="font-size: 14px;">Level 1</p>
<p style="font-size: 14px;">Level 2</p>
<p style="font-size: 14px;">Level 3</p>
  ...

...

Practice Exercise –

Please make your own schedule in HTML using html element, head element, body element, table element etc and publish it. Do not forget to designate DOCTYPE.

Also, use the Markup Validation Service from W3C to make sure that you can write the correct HTML.

Practice Exercise –

Decorate the schedule created in the exercise above using CSS.

Also use W3C’s CSS Validation Service to verify that the correct CSS is written.