~~NOTOC~~ ~~NOCACHE~~ {{page>css&nodate&noeditbtn&nofooter}} ===== Week 13 — Web content ===== This week's topic is about creating content for the Web. ==== Evaluation ==== Up to 10 points can be gained towards your final score by completing the **in-class exercises** on Friday. ==== What you will learn from this class ==== * What HTML is. * What the basic structure of a Web page is. * How to divide your page into sections. * How to add lists and tables to your page. * How to include graphics in your page. * How to make a hyperlink to another (external) Web page. * How to use fragments to identify different parts of your Web page as part of its URL. * How to make a hyperlink to another part of your (current) Web page. * How to use CSS to change the style of different elements in your web page. * How to identify a specific element by naming it, or a group of elements by collecting them into a class. * How to add simple dynamic behaviour to a web page using JavaScript. ==== Preparation === This week's preparation is to watch two videos about Web pages, specifically about hypertext markup language (HTML) and cascading style sheets (CSS), and then to complete a few exercises that will familiarise you with the basics of HTML and CSS. === Videos ==== | HTML tutorial | (33 minutes) | https://www.youtube.com/watch?v=PlxWf493en4 | | Intro to CSS | (3 minutes) | https://www.youtube.com/watch?v=EP9QMdoXvXE | The first video (HTML tutorial) covers most (but not all) of the material in the exercises below. I recommend you follow along practically with the first video, creating your own small web site. /** === Notes === The self-preparation videos cover the following topics. === What is the world wide web? === https://www.youtube.com/watch?v=J8hzJxb0rpc (4 minutes) * the Web can be used for any activity built around organising or exchanging data * the Web is accessible from computers, smart phones, and even cars **/ === Exercises === == 1. Create a small "Web development" environment == First, create a file called "''index.html''" in your current directory that contains the following text:

Welcome to your Computer-Wide Web!

 This is "the world's simplest Web page". To display it in your browser you have two options: open the page directly, or run a small Web server. **Option 1**: display the page directly - Open a blank page or tab in your favourite Web browser. - Open a file manager on the current directory. Either navigate there in your file manager, or open a new file manager window from a terminal; for example: * on Windows, type: ''explorer.exe .'' * on Mac, type: ''open .'' * on Linux, type: ''thunar .'' (or substitute whatever your file manager is called). - Drag the file ''index.html'' from the file manager window into the address bar of your browser window. **Option 2**: run a small HTTP server - Open a new terminal window. - Use ''cd'' to navigate to the directory where you created ''index.html''. - Run the HTTP server: ''python3 -m http.server'' - Type this URL into your Web browser address bar: ''http://localhost:8000/index.html'' You can make changes to ''index.html'' using any text editor. Press the "reload" button (''Control''+''r'' and/or ''F5'') in the browser window to see the changes. == 2. Add a heading to the page == Look at your Web page. It contains three nested //elements// that are delimited by starting and ending //tags//: - The entire page which is enclosed in: '' ... '' - Inside that, the visible content of the page which is enclosed in: '' ... '' - Inside that, a single paragraph of text which is enclosed in: ''

...

'' (The first line is not really part of the Web page. It is an SGML //document type declaration// which tells the browser exactly which set of rules it should follow when trying to understand the rest of the file's contents.) To make a heading you surround some text with ''

'' and ''

''. Since the heading should be visible, it must be inside the ''body'' element. Since the logical place for the heading would be before the paragraph of text, it should also come before the ''p'' element.

Hello, world

Welcome to your Computer-Wide Web!

 Modify the file and refresh the page to see the heading. {{13-page-structure.png?direct}} The elements in a Web page form a "hierarchical" tree structure, just like the tree structure of folders and files in a file system. The root of the hierarchy is the ''html'' element. The ''body'' element is a //child// of the ''html'' element. In your original document the ''body'' element is the //parent// of the ''p'' element, and the ''p'' element is a child of the ''body'' element. {{13-page-structure-heading.png?direct}} Elements can have any number of children. When you added the ''h1'' element for the heading you put it inside the ''body'' element. The ''h1'' is therefore a child of the ''body'' element and a //sibling// of (which means "has the same parent as") the ''p'' element. Child elements are //ordered//. Since you added the ''h1'' before the ''p'' element in the document, it comes before the ''p'' element in the list of children belonging to the ''body''. (Try swapping the order of the ''h1'' and ''p'' elements. The page changes in the obvious way, because you have changed the order of the child elements in the ''body'' element.) == 3. Add some font weight and style changes == Anything that looks like '''' is called a //start tag// and it indicates the start of some //element// in the page. Anything that looks like ''<%%/%%//word//>'' is called a //end tag// and it indicates the end of some element in the page. With only a few exceptions, the '''' and ''<%%/%%//word//>'' tags must come in matching pairs. The corresponding element groups its content (everything inside it) together and affects how that content is interpreted or displayed. For example, to make some text **bold** you can surround it with '''' and '''' tags. Make the word "''your''" bold by surrounding it with these tags and refreshing the page in the browser. To make some text //italic// you can surround it with '''' and '''' tags. Make the words "''Computer-Wide''" italic by surrounding them with these tags and refreshing the page in the browser.

Hello, world

Welcome to your Computer-Wide Web!

 Everything in a Web page must follow a //strictly nested// structure and must be nested //without overlapping//. For example, in your Web page you have this paragraph:

Welcome to your Computer-Wide Web!

 The '''' //ends// the ''b'' element, and the '''' //starts// the ''i'' element. Those two tags cannot be swapped, like this

Welcome to your Computer-Wide Web!

 because then the elements would overlap, and the //single// space between '''' and '''' would have to belong to //two// elements at the same time. Even though many browsers will do what you expect if you write HTML this way, the results are not guaranteed and you should try hard to avoid it. == 4. Give your page a title == {{13-browser-tab-title.png?direct}} You have probably noticed that your browser tabs contain the name of the web site they are displaying. Each page can specify what it wants this title to be, along with many other kinds of //meta data// describing the page. This information is not part of the page content and so, logically, it should not be part of the ''body''. The ''html'' (root) element always has two children, the ''body'' and another element called the ''head''. The ''head'' element contains information about the page (rather than the actual content of the page) and is always present (even if you omit its tags in your HTML code and never mention it at all). The children of the ''head'' contain the meta data for the page, e.g., its title. To add the title to your page, begin by adding the missing '''' and '''' tags before the ''body''. Then inside the ''head'', add a ''title'' element that contains the text you want to appear in the browser tab for your page. {{13-browser-tab-title-2.png?direct}} Hello page

Hello, world

Welcome to your Computer-Wide Web!

 == 5. Add a horizontal rule at the end of your page == A ''hr'' element creates a horizontal rule. Since it separates paragraphs, it should be placed outside any paragraph ''p'' tag. The ''hr'' element has no children, so there is no point having separate start ''
'' and end '''' tags. The end tag is incorporated into the start tag by placing the ''/'' just inside the end of the start tag, like this: ''
'' {{13-browser-3-hr.png?direct}} Hello page

Hello, world

Welcome to your Computer-Wide Web!

 == 6. Add an image to your page == Since images can be embedded in text they should appear inside paragraph ''p'' elements. Add another paragraph element after your ''h1'' heading. You can put some text in it, if you want, but the real purpose is to put an image in it. The next step is therefore to find (or download) an image that you like and copy (or save) it in the same directory as your ''index.html'' file. Let's say it is called ''image.jpg''. To add an image to the page, create an ''img'' element to hold it. This ''img'' element is special in two ways: - Just like the ''hr'' element, the ''img'' element does not have any children. The end tag can be included in the start tag by putting the "''/''" inside the start tag, like this: '''' - The ''img'' needs to know where the image is stored. It gets this information through a ''src'' (source) //attribute// that is attached to the tag: '''' From now on I will leave out most of the code, so here is just the part of the file near the ''img'': {{13-browser-4-img.png?direct}}

Hello, world

At least it is not a kitten:

Welcome to your Computer-Wide Web!

 (Obviously, replace ''image.jpg'' with the actual name of your image.) Is your image too large or too small? You can put more attributes inside the tag. The ''width'' attribute affects how wide the image will be when rendered. To make it occupy 20% of the width of the screen, set the ''width'' attribute to ''%%"20%"%%''.

Hello, world

At least it is not a kitten:

Welcome to your Computer-Wide Web!

 Note that the attribute values (the name of the image file, the quantity describing the width) should always be written inside quotation marks. == 7. Add some lists to your document == HTML supports several kinds of list. An //unordered list// has items indicated by bullets. The ''ul'' element represents an unordered list. It has zero or more ''li'' //list item// child elements. Lists are usually displayed between paragraphs and so should appear outside ''p'' paragraph elements. {{13-browser-5-list.png?direct}}

Hello, world

  • use head to hold the meta data
  • use body to hold the content
 (Note the ''tt'' elements, within the ''li'' list items, that cause their content to be rendered in //teletype// [fixed-width] font.) An ''ol'' //ordered list// has numbered items. Its children are the same ''li'' elements, but instead of bullets they are indicated by numbers. Try changing ''
    ...
'' to ''
    ...
'' and check the effect. == 8. Add a table == {{13-browser-6-table.png?direct}} A ''table'' element contains zero or more table row elements. A table row ''tr'' element contains zero or more table data elements. A table data ''td'' element contains text, images, or any other content that can appear in a paragraph.

Hello, world

ul for an unordered (bullet) list
ol for an ordered (numbered) list
li for each item in either list
html for the entire Web page
== 9. Add a hyperlink to your page == {{13-browser-7-link.png?direct}} Hyperlinks are represented by anchor ''a'' elements. The target URL is given as an ''href'' (hypertext reference) attribute to the start tag. The children of the ''a'' element are the text, images, or other content that will be the "clickable link" visible on the page.

Hello, world

Let's go somewhere else!

 == 10. Add some style to your page to make things look different == Every element has a default "look and feel". The defaults can be changed by specifying //style// attributes for elements. Style information is placed inside a ''style'' element, and ''style'' elements can be placed anywhere in the document (either the ''head'' or the ''body''). A simple style might place a border around our table. {{13-browser-8-style.png?direct}} Hello page The ''style'' element contains //selectors// and associated //declarations//. In the example above, the selector ''table'' refers to every ''table'' element in the document. Following the selector, enclosed in curly braces, are a set of declarations that apply to the selector. Each declaration has the form: ''//property// : //value// ;'' In this example the ''table'' selector has only one property affected by style. The ''border'' property controls how the outside border of the ''table'' elements will be drawn. This example sets the border of all tables to be one pixel wide (''1px'') drawn as a ''solid'' line in the colour ''red''. == 11. Add some dynamic behaviour using JavaScript == Let's add a button to the page and make it do something fun when it is pressed. A ''button'' element works a bit like an anchor (''a'') element. Since buttons can appear anywhere in a paragraph, they should appear inside ''p'' elements. The children of the ''button'' element specify the content of the button's label. {{13-browser-9-button.png?direct}}

Hello, world

Here is a strange button!

The action that occurs when the button is clicked can be affected by attributes attached to the button element. The ''onclick'' attribute contains JavaScript code that will run when the button is clicked. Let's use it to change the colour of the heading. The first thing we have to add is an //identifier// that will give a unique name to the heading that we want to modify. To do that, add an ''id'' attribute to the ''h1'' element. The value of the ''id'' is the name by which we can look up the heading.

Hello, world

 After adding this attribute we can use a JavaScript function ''getElementById()'' to find the heading by its identifier. Once found, the same JavaScript code can set the heading's ''style.color'' attribute to change its colour. {{13-browser-9-button.png?direct}}

Hello, world

Here is a strange button!

Note that, in JavaScript, strings can be surrounded by ''%%"%%''double quotes''%%"%%'' or ''%%'%%''single quotes''%%'%%''. As shown in the above example, this is convenient when, e.g., JavaScript strings have to be written inside attribute values (which also must be strings). Finally, to truly make the button strange, try this: == Summary == Your final ''index.html'' should look something like this. {{13-browser-10-final.png?direct}} Hello page

Hello, world

Here is a strange button!

Let's go somewhere else!

ul for an unordered (bullet) list
ol for an ordered (numbered) list
li for each item in either list
html for the entire Web page
  • use head to hold the meta data
  • use body to hold the content

At least it is not a kitten:

Welcome to your Computer-Wide Web!

==== Further information ==== We have only scratched the surface of HTML, CSS, and JS. (Each one of them could be an entire course all by itself.) If you want to learn more then there is a //huge// amount of information online about HTML, CSS, and JavaScript. One very good place to start is: https://www.w3schools.com/ /* syllabus */ /* * Local Variables: * eval: (flyspell-mode) * eval: (ispell-change-dictionary "british") * eval: (flyspell-buffer) * End: */