HTML is an XML subset. This means it is composed out of tags which can contain attributes.
An HTML-tag indicator starts with < and ends with >, for example: <body>.
There are two types of HTML-tags:
Non self-enclosing tags exist out of two parts:
<tag></tag>. The closing part is identified by the forward slash (/) before the tag-name.These opening and closing tags can contain plain text and/or additional HTML markup.
Example: <strong>Bold Font</strong> (This tag formats its content in a bold font: Bold Font)
The whole (start + content + end) is an HTML element.
A self-enclosing tag has no content. So the closing part is left of:
Example: <br> (this will insert a newline into your HTML)
Sometimes you may see self-closing tags used like <tag />, this trailing tag is optional since HTML5 and can be left of.
Attributes modify the behaviour of a tag.
For example the a-tag converts a piece of text into a clickable link.
The href-attribute defines where the link should point to:
Attributes are also used to modify the appearance of a tag. Later in this course we’ll see more detailed examples of this.
A valid HTML5 document requires a bit of boilerplate:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Your webpages metadata -->
</head>
<body>
<!-- your webpage specific content -->
</body>
</html>This minimal markup tells the browser to treat the document as a HTML5 document.
The head-tag allows the developer to define meta-data about the webpage. It is a wrapper around multiple other tags.
The head-tag may only be defined once in the complete document.
Everything defined within the head element will not be visible in the HTML document. The head content can have an effect on the appearance of the page but it’s content will not be visualised.
The title tag sets the web-page title. This title is displayed by the browser in the browser-tab.
We will address styling later in this course but for now it is sufficient to know that style information should be included in the head of a web-page.
The style-tag allows to include raw CSS rules in the documents
The link-tag allows to external style sheets into the document. (Do not confuse this tag with the a-tag…).
We will only ever include CSS-files to style our web-pages. The provided attributes in the example are required to include a CSS-file and avoid browser quirks.
The body-tag should wrap all the content to be displayed.
Hello World from the my first web-pageCreate a text file name hello-world.html
With contents:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World</title>
</head>
<body>
Hello World from my first web-page.
</body>
</html>Open the local HTML file in the browser.
H*The purpose of a header is to indicate the start of a new block and add an appropriate heading.
The hn-tags come in 6 variations. From to highest order header h1 to the lowest h6.
The browser auto-formats these headers accordingly from largest to smallest font-size.
Hn-tagThe purpose of these types of tags is to wrap other content. Why the content should be wrapped can vary:
They are also referred to as block-elements
pThe p-tag encloses a blob of related text into a paragraph
Content before...
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
Content after...divThe div defines a division in the document. It is used a lot to wrap some content and apply styles.
It has no special styles by default
Content before...
<div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
Content after...preThe pre keeps all white-space in the element (in contrast to all the other elements). The text is also displayed in a monospaced font.
Content before...
<pre>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua.
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</pre>
Content after...blockquoteThe blockquote-tag is used to denote some block of text as a quote from another source.
Content before...
<blockquote>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</blockquote>
Content after...hrThe hr isn’t really a container, it can’t contain other elements, but it is a block element. The tag inserts a line into the document. This can be used to split / separate sections.
These tags are inline because they do not start a new block (identified by new lines) as the previous tags.
Their purpose is either to give a specific style and semantic meaning to an element or to extend a certain functionality to the element.
aThe a is used to link to other web-pages.
In order the function, the href-attribute is required on the a-element.
brThe br insert a newline into the document.
codeThe code-tag is to inline elements what pre is to block elements. It will preserve white space and add a monospaced font in an inline way.
emThe em-tag allows to emphasise certain text.
smallThe small-tag indicates the browser to use a smaller font-size to visualise this content.
spanThe span-tag is a generic wrapper. It has no special semantic meaning. The span-tag is mostly used to style/target some text.
strikeThe strike-tag is used to strike through some text.
strongThe strong-tag can be used to make text bold.
qThe q-tag is used to indicate certain inline text was quoted from an external source.
imgThe img-tag can be used to inert images into the markup. The src-attribute is required and specifies the location of the image. The location can be a local path, this means a path form the current script directory to the image location or a full (absolute) URL path.
Make a web-page with links to:
Print the following text so the sentences are broken up as below.
HTML is a markup language browser understand to format documents.
CSS is a way to style this markup.
PHP is a programming language.
It is used to dynamically generate HTML-markup.
Print the following text so hello world is emphasised.
Let’s emphasise hello world in this sentence.
Print the following text so hello world is smaller
Let’s make hello world smaller in this sentence.
Print the following text so hello world is bold
Let’s make hello world bold in this sentence.
Print the following text so hello world is crossed off.
Let’s strike hello world in this sentence.
Some elements don’t make any sense on their own. They should be part of a larger elements-group.
fieldset is a container with an (optional) header (legend ).
This container is often used to group related from items together.
A HTML-list is composed of li-tags enclosed by an ul or ol-tag.
ulolA simple table is composed out of:
As already seen with the a-tag, attributes can modify the behaviour of an HTML-element.
The a-tag requires the href-attribute to be set. Otherwise the browser has no clue where to take the user on a click.
The attributes are also often used to modify the appearance of an element.
Commonly used attributes:
The class attribute holds a space separated list class-names. The element is member of all the classes specified in the attribute. These classes can be used to style a group of elements the same way.
For example all the elements which are member of the same class (have the same class-name in the class attribute) should have the text colour set to red…
The id-attribute lets you assign a unique identifier to an element.
This identifier should be unique for the whole page and thus occur only once.
If the id is specified in the URL prefixed by a pound symbol (#), the element will be automatically scrolled into view.
The style attribute can be used to apply CSS-rules to a single element.
Generally speaking you should not set the styles via this tag. A dedicated style block in the head of page or an external style sheet are better, more scalable, options. It can however come in handy in this introduction to HTML and CSS.
See HTML and CSS for more info about styling an element.
The title attribute lets you assign a title to an element. This title will be displayed as a tooltip when hovering with the mouse over this element.
Add a table of contents (TOC) to the previous page (cv.html).
The TOC should contain all headers, clicking a header should take the user to this header/section
Re-create the HTML skeleton of a wiki page: https://en.wikipedia.org/wiki/FASTA_format