Text inside a paragraph.
Another paragraph.
``` Basically a HTML document consists of two main parts: thehead and the body. The head contains meta data and imports (more later), which are not visible in the view of the Web page. The content of the body contains visible elements. Both head and body, are enclosed by a html **tag**. Placing elements inside other elements is called **nesting**. Outer elements are **parents** of inner elements (**children**).
index.html.)
### Tags
Elements of a website (like headlines, texts, images) are defined by **tags**. Content inside tags is enclosed by a start tag and an end tag (with a /):
```html
A paragraph of text.
attribute="value", for example href="https://www.uni-weimar.de".
``` html
Link to Bauhaus University
```
href (**h**ypertext **ref**erence) is an attribute of the <a> tag. It defines the destination of the link. See [more attributes of a link](https://www.w3schools.com/tags/tag_a.asp).
index.html document. Use the `target` attribute with the value `_blank`.style attribute of a tag, for example h1:
```html
style tag inside the head:
```html
```
The style code above is applied to all p tags of the document.
3: **External** through a separate .css file. This is the common and recommended way, unless it's a very minimal page with a small portion of CSS. (Then an internal embedding is recommended.)
External files are embedded through the head tag:
```html
```
The link tag is one of a few without an end tag.
Common folder structure of a Web project:
HTML files in the main folder, images/ videos/ sounds in separate subfolders, CSS files in a subfolder, JavaScript files in a subfolder.
style.css and save it inside a subfolder named css. Paste the following content into it:
body tag is placed on top of all other elements.)
``` css
body {
font-family: monospace;
font-size: 16pt;
background-color: salmon;
}
```
Choose a font-family or several based on [this information](https://www.w3schools.com/css/css_font.asp).
It is possible to use the 3 ways of integrating CSS all together. Then some values will be overridden by others: Inline has the highest priority. The priority between internal and external styles is given through their appearance in the header: styles that appear later will override previous styles.
### Selectors
We have used tags as selectors already. There are two more options: id and class. These are two attributes that we can assign to HTML-Elements.
An id is a **unique** identifier, thus we should avoid using the same value/ name for several id-attributes. It is useful if we want to style one specific element or even more if we want to access one specific element (with JavaScript).
We will add a button with a unique id.
```html
```
No we can style this button either by the button tag or its id. If we want to address an id in CSS, we write a # before the name.
```css
#info-button {
letter-spacing: 5px;
}
/* or */
button {
letter-spacing: 5px;
}
```
The class selector is used if we want to group several elements, for example the 3 w's in our headline, so that we can highlight them. For that we have to replace every w in our headline with:
```html
w
```
(For a default highlight effect, we could also use the specified tag mark.)
We define a class in CSS with a dot before the class name:
``` css
.www {
text-decoration: underline;
}
```
Overview:
```css
tag {
/* Declarations */
}
#id {
/* Declarations */
}
.class {
/* Declarations */
}
```
#### Nesting
It's possible to combine selectors to access nested elements. Example HTML:
```html
```
CSS:
```css
img {
width: 100%;
}
/* This will override the width of all index.html and style.css file. (Your code can/ should be different of course.)
index.html
``` html
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
style.css
``` css
body {
font-family: monospace;
font-size: 16pt;
background-color: salmon;
}
h1, h2 {
color: orange;
}
h1 {
font-size: 64pt;
}
h2 {
font-size: 32pt;
}
p {
background-color: teal;
color: snow;
text-align: justify;
text-indent: 16pt;
}
a {
color: black;
background-color: hsla(50, 100%, 50%, 0.5);
}
.www {
text-decoration: underline;
}
#info-button {
text-transform: uppercase;
text-shadow: 2px 2px 5px red;
letter-spacing: 10px;
}
```