You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
HTML documents are just plain text with added tags.
A tag is made using angle brackets< and >
Inside these brackets is the name of the tag.
We tag the start of every paragraph with <p> – "p" is the name of the tag that means a paragraph.
Usually tags enclose a part of the document. The tag <p> marks the beginning of a paragraph, and there is a closing tag</p> (notice the slash /) that marks where the paragraph ends.
Documents on the web tend to have a title, which shows in the browser tab and in search results.
Our document is called index.html because that's the file name but that's not a good title.
To specify a better title, we include the <title> element at the top of the document.
Stage 5: Structuring the Page using HTML (see the diff)
A title is not part of the page content – it is metadata – information about the document.
Every HTML document has two sections: a "head" with such metadata, and the "body" with the actual content displayed on the page.
So every HTML document, whether we write it or not, actually has three elements: <html>, <head> and <body> – the latter two are nested inside the <html> element.
All the elements together form a hierarchy – in computing terms a tree.
Our document now makes this hierarchical structure explicit.
<title> is inside <head>.
The rest is inside <body>.
The nesting is shown with indentation – this helps the human understand the HTML code better.
It is good practice to specify that we use the latest version (also known as HTML5).
This is indicated by a special <!doctype html> tag at the beginning of the file.
It is good practice to separate form from content (style from substance).
So far we have developed the content (the substance). Now we give it a form by adding a stylesheet.
We have created a file called style.css, and there:
Added a single rule that sets the background of the body to black and the text color to white.
Note that the syntax of CSS is different to HTML.
Stage 7: Font and Colour Improvements (see the diff)
Now we improve our stylesheet so the page starts to take on the appearance of opening text in Star Wars.
We changed the font from the default (which is whatever the browser is set to use) to a specific named typeface – Arial.
The text colour is changed from white to a Star Wars yellow.
There are several ways of describing colour in HTML, often these require a little understanding of how mixing different levels of red, green and blue light can produce different hues.
HTML contains elements that help us describe the content.
Elements don't just compartmentalise the page, they add meaning.
We added an <article> tag around the content to describe it as such.
Added a new stylesheet rule to fix the width of the content to 15em wide (1em is the current font size).
The text-align property spreads the text on each line so that it uses the full width of the <article> element.
Finally, we adjusted the margins of the <article>. Setting this value to auto directs the browser to add equal margin space either side of the element, so it becomes centred.
"CCC Episode II" and "A New Platform" are now centred. We achieved this by:
Grouping the elements in a parent element: the <header> element is just right for a group of headings at the top of the page.
Adding a style rule that centres all the content of that element.
Note that HTML and CSS use American spellings even though the web's inventor, Sir Tim Berners-Lee, is British, and worked in Switzerland at CERN on European-funded particle physics experiments when he invented it.
To get the text as close as possible to the original a couple of small changes were needed. Browsers include a default stylesheet which specifies things how large a heading should be, and how much space to go around it. There are three things we need to override in this sheet:
In the original movie intro, the strongly emphasized text "Death Star" was in all-caps but not bold - a CSS tweak achieves this.
Next we make the text take up the full width of the browser.
The part of the browser that shows the page is called the viewport.
The width and height of the viewport are available as a unit of measurement when styling the page.
vw and vh are 1% of the width and height of the viewport respectively.
Earlier we set our text to be 15em wide, so since we want those 15 characters to fill the width of the screen we calculate 100/15 (which is 6.66 recurring), and set that as the font size, thus font-size: 6.66vw;
By default the body has a small margin which must now be removed in order for the new wider text to fit.
We add the theme music such that it begins to play as the logo animation begins.
Because web pages cannot just willy-nilly play music to us, we need to interact with the page first: when loading this stage, we quickly click somewhere in the page and only then will the browser allow the music to play.