Introduction to Web Programming
(1DV525)
HTML
Licence for this work
This work is produced by Johan Leitet for the course Introduction to Web Programming (1DV525) at Linnaeus University.
All content in this work excluding photographs, icons, picture of course litterature and Linnaeus University logotype and symbol, is licensied under a
Creative Commons Attribution 4.0 International License.
You are free to
- copy and redistribute the material in any medium or format
- spread the whole or parts of the content
- show the whole or parts of the content publicly and digital
- convert the content to another format
- change the content
If you change the content do not use the photographs, icons, picture of the course literature or Linnaeus University logotype and symbol in your new work!
At all times you must give credit to: ”Linnaeus university – Introduction to Web Programming (1DV022)” with the link https://coursepress.lnu.se/kurs/introduction-to-web-programming/ and to the Creative Common-license above.
Content
- The web as a platform
- A brief look on protocols
- Markup languages from HTML to HTML5
- A HTML-document
- structure
- entities
- charcodes
- comments and indenting
- graphic vs. logical formatting
- overview of tags
- Forms
Client - Server
The Web != Internet
Protocols
| TCP/IP model | ||
|---|---|---|
| IP | Internet layer | |
| TCP | Transport layer | |
| http (1.1 / 2) | Application layer | |
| TLS / SSL | Application layer | https |
| WebSocket | Application layer |
1993
1994
1996
1999
2003
Web page / Web application
Web as a platform
- Web as a platform
- The web of things
The goal
Seperation of concerns (SoC)
 |
.html | Structure |
 |
.css | Presentation |
 |
.js | Behavior |
Markup
The dawn of HTML5
- W3C HTML 5.2 http://w3c.github.io/html/
- HTML Living standard https://html.spec.whatwg.org/multipage/
- http://caniuse.com
The foundation
<!doctype html>
<html lang="sv">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
doctype
<!doctype html>
- First in document
- Standard mode / Quirks mode
Hypertext Markup Language
This is some <em class="more">HTML</em> in a document
Tag
<em></em>
<em> <!-- Start tag -->
</em> <!-- End tag -->
Element
<em class="more">HTML</em>
Attribute
class="more"
Attribute name
class
Attribute value
more
<HTML>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
- The document
- lang defines the main language of the page
<head>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
Title
Meta charset
- uft-8
- iso-8859-1 (~ win-1252)
<body>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
The content of the webpage
Block and inline elements
- HTML5 introduces a more complex model, but this one is still applicable
| Block elements | Inline elements |
|---|---|
| div,p,h1-h6 | img |
Structure
Classic HTML
HTML5
Structure
<body>
<header></header>
<nav></nav>
<main>
<article></article>
<article></article>
<article></article>
</main>
<aside>
<section></section>
<section></section>
</aside>
</body>
Validation
- Good practice
- https://validator.w3.org/
Block and inline elements
| Block elements | Inline elements |
|---|---|
| div | img |
| p | a |
| h1-h6 | em, strong |
| ul, ol, li | b,i |
| header, hgroup | ... |
| footer | |
| main, aside, nav | |
| section, article | |
| details, menu | |
| ... |
URL
A URL (Uniform Resource Locator) is a webpage address on internet.
https://1dv525.github.io/xx222yy-examination-1/
- You need to publish your
web site on a web server
to be able to reach it.
Indenting your code
••<div>
••••<ul>
••••••<li>First in list</li>
••••••<li>Second in list</li>
••••</ul>
••••<p>
••••••This is a paragraph of text with something <em>important</em>
••••</p>
••••<p> Another paragraph of text...</p>
••</div>
-><div>
->-><ul>
->->-><li>First in list</li>
->->-><li>Second in list</li>
->-></ul>
->-><p>
->->->This is a paragraph of text with something <em>important</em>
->-></p>
->-><p> Another paragraph of text...</p>
-></div>
HTML entities
HTML comments
<!-- This is a comment in HTML. It can be
multiline. Remember! Anyone can read this
comment!!! -->