This here’s a machine-translated text that might contain some errors!
An HTML webpage is just a plain text file (with the file extension .html) that’s read by a web browser, instead of a text editor. HTML is a markup language, meanin’ the content needs to be marked up, which is noted (that is, marked) with startin’ and endin’ HTML tags.
All the websites you visit use HTML
A browser is just the tool that reads HTML code. If you right-click and inspect or choose “View Page Source” you can read the HTML in raw format. Everything you’ve ever seen on websites can therefore actually be recreated in HTML.
OBS: Web developers don’t just write HTML code all day long to design websites. There’s software or services that are more drag’n’drop like e.g. Wordpress, or frameworks in programming that can relieve a lot of the work for you. It’s still important to understand how HTML works to be able to achieve the results you want.
HTML Tag Syntax
HTML tags follow a syntax for both openin’ and closin’ tags, which are noted with less than, or greater than signs (also known as alligator mouths). < and >. What sets a closin’ tag apart is that it contains a slash (</ and >).
Closing tags
Some tags don’t need a closing tag, but it doesn’t hurt to close these anyway. An example is the tag for image or line break.
Okay, partner. Just paste the Norwegian markdown here, and I’ll wrangle it into some proper Cowboy English, keepin’ all the fancy markin’ stuff just as it is. Let’s see what ya got.
<tag>I'm inside a "tag"-tag</tag>
<annentag><tag>I'm inside a "tag"-tag, inside a "annentag"-tag.</tag></annentag>
I'm not inside any special tag (don't do this)
Plenty o’ Tags to Pick From
There’s plenty o’ tags to pick from - thankfully, we don’t need to know a whole heap of ‘em to build a purdy website. Here’s a list o’ the tags we’ll need for this here task:
| Tag | Description |
|---|---|
<!DOCTYPE html> | Now listen up, this here tag only goes on the very first line and don’t need no closin’ tag. Marks that the document is an HTML document (a shebang) tellin’ the browser what language it’s readin’. |
<html> | Defines the start o’ an HTML document |
<head> | Defines a head area where the “brain” o’ the website is stored |
<body> | Defines a body area, where we place elements that’ll be visible on the website |
<h1>, <h2> -> <h6> | Headings (Heading 1, Heading 2…) |
<p> | Paragraphs (text blocks) |
<b> | Bold text |
<i> | Italic text |
<br> | New line with text (don’t need no closin’ tag) |
Lurer du på hvordan du kan …?
Just go look it up on the web, partner!
If you go searchin’ for html how to image|add video|cool button you’ll find a whole heap o’ stuff! It can be kinda tricky findin’ good examples sometimes, but W3Schools often has some real good ones ya can try out.
HTML’s Foundation
All HTML documents gotta have the same structure – some browsers’ll try to fix things automatically, but it ain’t a given that the website’ll work without it.
<!DOCTYPE html>
<html>
<head>
<!-- Content that is not visible goes here -->
</head>
<body>
<!-- Content that is visible goes here -->
</body>
</html>
Line Breaks
If’n ya go ‘bout makin’ a paragraph with line breaks in HTML, it ain’t gonna go ‘cross multiple lines, see:
<p>
Linje 1
<!-- Dette er en kommentar på norsk --> <!-- This here be a comment in Norwegian -->
Linje 2
</p>
becomes
Okay, partner. Just paste the code block and I’ll wrangle them Norwegian comments into some proper Cowboy English. I understand the rules – code stays untouched, only the comments get the treatment. Let’s get to it.
Line breaks gotta be marked by hand with the <br> tag. Or, ya can define a brand new paragraph (paragraphs got space ‘tween ‘em, often more space than a regular line break) like so:
<p>
Linje 1
<br>Linje2
</p>
<!-- Same as -->
<p>Linje 1<br>Linje 2</p>
<!-- Alternative (gets bigger space and is technically wrong) -->
<p>Linje 1</p>
<p>Linje 2</p>
Task 1.1: Give ‘er a Whirl
Now it’s yer turn to try. Create a file named oppgave1-1.html and open it in yer preferred development environment, like Visual Studio Code, fer instance.
OBS: Husk mappe
The assignment needs to be inside a folder that follows good naming conventions. You should ideally submit a folder, not an individual file. Remember to include your name in the folder name.
Make a webpage with the followin’ components, and put ‘em in the right place like in the example above:
<h2>En overskrift til paragraf 1</h2>
<p>This here be <i>paragraph 2</i><p>
<h2>En overskrift til paragraf 2</h2>
<h1>Hello World</h1>
<!-- Hei verden! --> <!-- Howdy world! -->
<p><b>Paragraf</b> 1</p>
Emmets - shortcuts in VSCode (Advanced)
NOTE. This is gettin’ advanced.
VSCode, and a whole heap o’ other editors, got some emmets (shortcuts) that lets ya build code quicker. If ya type ! and hit enter in a blank HTML document, the foundation’ll be built for ya.
Task 1.2: Test Out Line Breaks
Take the followin’ HTML code and paste it into a new file oppgave1-2.html, and insert the proper line breaks so it matches the HTML code:
Now listen up: Don’t you forget
<!DOCTYPE html>,<html>,<head>and<body>!
<h2>Ja vi elsker dette lander</h2>
<p>
Ja vi elsker dette landet
Som det stiger frem
Furet værbitt over vannet
Med de tusen hjem
Elsker Elsker det og tenker
På vår far og mor
Og den saganatt som senker
Drømmer på vår jord
Dette landet harald berget
Med sin kjemperad
Dette landet håkon verget
Medens øyvind kvad
Olav på det land har malet
Korset med sitt blod
Fra dets høye sverre talte
Roma midt imot
</p>