+ HTML and CSS 1
+HTML
+Markup Languages
++ A markup language is not a programming language. A + markup language describes documents in which some marks add + information. + + The Hyper-Text Markup Language + is a standard for documents displayed in a web browser. HTML uses + tags enclosed in angle brackets (<>) to mark text. There are 3 + types of tags: +
+ +-
+
- + Open <tag>, and close </tag>, like + <p> A paragraph </p>. In between the opening and + closing tags we can put anything, including other tags. + +
- + Self-closing, as in <img src="cat.png" /> + (note the slash at the end). + +
- Empty elements, like <br> (no slash at the end). +
Entities
++ Since angle brackets are used for marks, a document displaying those + symbols will need to represent them in another way. Entities + describe all kinds of symbols (including angle brackets), and they + start with a & and end with ;. There is a full list of standard + entities and they are useful in general for showing mathematical + operations, arrows, special accented characters, etc. +
+ ++ So a way to show the text “this is the: 2 × 3” in HTML would be: +
+ +<body>This is the <body>: 2 × 3 </body>+ which uses the entities lt (less than), gt (greater than), and + times. +
+ ++ As in typical programming languages, you can insert comments in an + HTML document, which are tags ignored by the parser and therefore + only useful for developers which work on the code. They start with + . +
+ +For example:
+ + <!-- The next paragraph should be changed to something else soon -->
+<p>Placeholder</p>Element Trees
+ ++ Since tags have “children” and those children tags can have more + children, any HTML document is an + tree of elements (usually represented upside-down), + with tags at the top of the hierarchy being the roots. It is + important to read HTML documents keeping in mind this tree and + making sure not to not loose track of it by indenting the code + properly and using a good editor. +
+ +Minimal Document
+A sample minimal HTML document is this:
+ +
+<!doctype html>
+<html>
+ <head>
+ <title>Minimal</title>
+ </head>
+ <body>
+ <h1>Minimal Doc</h1>
+ <p>Hello</p>
+ </body>
+</html>
+
+ + It must contain at least: the <!doctype html> tag at the + beginning, which acts as a mark for the HTML type of file; an html + tag enclosing the whole document; and both <head> and + <body> which describe the metadata and the visible document. +
+ +Document Metadata
+ ++ The <head> tag contains metadata, which describes things that + are not directly shown on the page itself. +
+ +The Title
++ The <title> tag gives a title to the page, which usually is + displayed in the browser’s tab. If that page is saved, the title is + also used for the file. +
+ +<title> A simple title </title>Links
+ ++ Links are relationships between the document we are describing and + other resources. These links can be of different types depending on + the “relationship”, abbreviated rel as an attribute. The + <link> is a self-closing tag. +
+-
+
-
+ Stylesheets: rel="stylesheet", to attach a CSS
+ style-sheet to the page (can be used many times).
+
+
+<link rel="stylesheet" href="/styles.css" />
+ -
+ Stylesheets for specific media: adding
+ media="..." we can choose for what media is the stylesheet.
+
+
+<link rel="stylesheet" media="print" href="/print.css" /> +<link rel="stylesheet" media="screen and (max-width: 600px)" href="/mobile.css" />
+ -
+ Favicon: rel="icon", to describe what the icon of
+ the page should be.
+
+<link rel="icon" href="favicon.ico" />
+ -
+ Preload: To indicate files to preload, otherwise
+ they are loaded on-demand, and preloading them can speed-up things
+ quite a bit.
+
+
+<link rel="preload" href="/fonts/my-font.woff2" as="font" />
+
Style
++ You can write styles inside the <head> element with a + <style> tag, using CSS directly embedded in the html. +
+ +<html>
+ <head>
+ <style>
+ body {
+ font-size: 20pt;
+ }
+ </style>
+ </head>
+ <body>
+ This text will be large!
+ </body>
+</html>Scripts
++ You can also include scripts in the head> with the <script> + tag. Using both <style> and <script> allows you to send + a self-contained web document. +
+ +Metainformation
++ With the <meta> tag you can attach metainformation of various + kinds to the document. The <meta> tag is an empty tag. +
+Examples:
+ +-
+
-
+ Setting the encoding:
+
+
+<meta charset="utf-8" />
+ -
+ Description of the website (good for SEO):
+
+<meta name="description" content="A brief description of my website" />
+ -
+ Setting some keywords for your site (good for
+ SEO):
+
+<meta name="keywords" content="educational, course, programming" />
+ -
+ Redirect to another site after a certain number
+ of seconds:
+
+<meta http-equiv="refresh" content="3;https://www.upc.edu" />
+
+ There are many more, and some people have collected a + somewhat complete list of meta tags. +
+
Comments
+