HTML Flashcards
Every page must have one!
<title></title>
Headings
<h1></h1>
… <h6></h6>
Paragraph.
<p></p>
Emphasis and
Strong emphasis.
<em></em>
<strong></strong>
Parts of a document.
<header></header>
<article></article>
<section></section>
<footer></footer>
Anchor
<a></a>
Bullet and numbered lists
<ul></ul>
<ol></ol>
<li></li>
A markup language
A markup language is one that is designed for defining and presenting text. HTML (HyperText Markup Language), is an example of a markup language. Within a text file such as an HTML file, elements are marked up using tags which explain the purpose of that part of the content.
Procedural and Descriptive are too key elements.
HTML: Tags, Elements, Open and Close
<html>
…
</html>
HTML Attributes
<a>
…
</a>
head
<!doctype html>
<title>HTML Example</title>
<meta></meta>
<meta></meta>
body
<header>
<h1>HTML Example</h1>
<p>Matt Dennis
<p>March 2020
</header>
<section>
<h1>Introduction</h1>
<p>Paragraph Text.
<p>Isn't it pretty…?
<em>Less so.</em>
</section>
</p></p></section></p></p></header>
Procedural
What to do.
How it looks.
Not why to do it.
e.g.
<b>words</b>
<hr></hr>
<br></br>
<blink>words</blink>
Descriptive
What it means.
Not how it looks or what to do.
e.g.
<h1>words</h1>
<p>para words
<em>words</em>
</p>
<aside>words</aside>
Stratified
Separates content from presentation.
Semantic
Enables machine processing.
Dynamic
Different presentation to suit circumstances.
URLs
Uniform Resource Locators (URLs)
https://port.ac.uk/
http://www.example.com/forum/questions/?tag=networking&order=newest#top
. typed into an address bar
. hyperlinks (<a></a>)
. src attribute on elements
URL Structure
Scheme: This part indicates the protocol used to access the resource. Common schemes include http, https, ftp, mailto, etc. For example, in “https://www.example.com”, “https” is the scheme.
Host: This specifies the domain or IP address of the server hosting the resource. In the example “https://www.example.com”, “www.example.com” is the host.
Port (optional): This part, if present, specifies the port number on the server to which the client should connect. The default port for HTTP is 80, and for HTTPS is 443. If the port is not specified, it is assumed to be the default for the given scheme.
Path: The path indicates the specific resource or location on the server. For example, in “https://www.example.com/products/shoes”, “/products/shoes” is the path.
Query (optional): This part is used for passing parameters to the resource. It starts with a question mark (?) and consists of key-value pairs separated by ampersands (&). For example, in “https://www.example.com/search?q=shoes&category=sport”, “?q=shoes&category=sport” is the query.
Fragment (optional): The fragment identifier is used to point to a specific section within the resource. It starts with a hash (#). For example, in “https://www.example.com/page#section1”, “#section1” is the fragment.
Absolute vs Relative URLs
Absolute URLs include the scheme:
<a>BBC News</a>
Relative URLs refer to resources on the same server:
<a>Contact us</a>
(request contact.html at the same host and path as current resource)
<a>Head home</a>
(request index.html in the path ‘above’)
A CSS Rule
p {
background: red;
color: white;
padding: 1em;
p = selectors
{} = blocks
background, color, padding = properties
red, white, 1em = values
:, ; = punctuation
CSS
Cascading Style Sheets
Since ~1997
A W3C standard
for styling HTML
Text files
(human readable)
Files contain rules
You define the rules
