Difference between revisions of "Courses/Essential HTML"
| Line 1: | Line 1: | ||
<slidy theme="aa" /> | <slidy theme="aa" /> | ||
= | = Day 1 the Wold Wide Web = | ||
== WWW (what ?)== | == WWW (what ?)== | ||
| Line 144: | Line 144: | ||
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element - HTML element reference | * https://developer.mozilla.org/en-US/docs/Web/HTML/Element - HTML element reference | ||
* http://diveintohtml5.info - HTML 5 | * http://diveintohtml5.info - HTML 5 | ||
=Day 2: the URL, linked and embed resources= | |||
==URL== | |||
URL stands for Uniform Resource Locator. It is the global address for documents on the Web. | |||
It is trough URLs that from our computers we request webpages and these appear in our browsers. | |||
A URL , such as: http://mouchette.org/home/chezmoi.html be decomposed in to the following parts: | |||
* '''<nowiki>http</nowiki>''': the protocol | |||
* '''<nowiki>mouchette.org</nowiki>''': the domain name | |||
* '''<nowiki>/home/chezmoi.html</nowiki>''': the file path | |||
===Protocol=== | |||
* http | |||
* https | |||
* ftp | |||
===Domain name=== | |||
The domain name is like the address of webpages, or more precisely the alias to the page's true address, page's IP. | |||
"[If you want]to access the Witness Web site you would type in the www.witness.org address, also known as a domain name, instead of 216.92.171.152. Your computer then sends a message with this name to a DNS server. After the DNS server translates the domain name into an IP address, it shares that information with your computer. This system makes Web browsing and other Internet applications more human-friendly for humans, and computer-friendly for computers." | |||
http://en.flossmanuals.net/bypassing-censorship/ch006_chapter-1-how/_booki/bypassing-censorship/static/04webpage_new.png | |||
From http://en.flossmanuals.net/bypassing-censorship/ch006_chapter-1-how/ | |||
===file path=== | |||
The file path indicates the location of page inside the computer (aka server) that hosts this webpage. | |||
<nowiki>home/chezmoi.html</nowiki> indicates that the file we are requesting is inside the "home" folder is called "chezmoi.html". | |||
Paths in my local page: | |||
[[File:folder_structure.svg]] | |||
myfolder/ - the child folder | |||
myfolder/mysubfolder/ - the grand-grandchild | |||
../ - the parent folder | |||
../../ - the grand parent folder | |||
'''Exercise: ''' | |||
* Create an HTML file, that uses other local files (images, html files, etc), stored in parent, current and child folders. | |||
* Move the HTML file to a different directory | |||
* Try to make all the local files are '''not broken''' in HTML file | |||
==iframe== | |||
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe | |||
The <nowiki><iframe></nowiki> Element embeds another HTML page into the current page. | |||
===iframe with local content=== | |||
A solution to keep the same "header" and "footer" (outside the iframe) while the content keeps changing inside the iframe | |||
===iframe with remote content=== | |||
===embedding googles services=== | |||
(later) https://developers.google.com/maps/documentation/embed/guide | |||
==embed== | |||
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed | |||
The <embed> element, integrate external content, such as (youtube, vimeo) videos on to a html page | |||
==id, class arguments== | |||
==css== | |||
Revision as of 14:04, 26 November 2014
<slidy theme="aa" />
Day 1 the Wold Wide Web
WWW (what ?)
HTML developed from the creation of the Wold Wide Web.
- World Wide Web, AKA www, AKA the Web, is not the Internet.
The Internet is essentially the motorway where many vehicles (or protocols) circulate, the Web is simply one of them. Others vehicles on the Internet are email, FTP, torrents, IRC chat, etc.
The Web is a network of interlinked pages, that are accessible through a Web Browser.
Tim Berners-Lee
The vision for what would become the Web came from Tim Berners-Lee who happened to be working at CERN in the late 1980s
a bloody mess at CERN
Tim Berners-Lee in 1980 worked as a software developer at CERN.
He was faced with a few facts that would make him muse about what would later become the Web.
- CERN's incredible abundance of knowledge and research
- CERN's equally abundance of different computer hardware/software, protocols, file formats, documentation systems
== a bloody mess
Inside CERN
a unified, global documentation system
Berners-Lee wanted to create a unified, global documentation system, that allowed CERN researchers to document and share their progress in both an easily readable easily writable way.
Enquire
Berners-Lee's first efforts went to the development of a program called ENQUIRE, a pet project to help him remember the connections among the various people, computers and projects at CERN.
"In Enquire I could type in a page of information about a person, a device or a program. Each page was a ‘node’ in the program, a little like an index card. The only way to create a new node was to make a link from and old node"
a single information space
The Enquire experiment got him thinking:
"Suppose all the information stored in computers everywhere were linked … Suppose I could program my computer to create a space in which anything could be linked to anything. All the bits of information in every computer at CERN, and on the planet, would be available to me and anyone else. These would be a single information space".
Proposal
In a proposal written to CERN's administration Berner-Lee listed the requirements for this global information space:
- accessible across networks - providing data to different computers
- distributed - allowing anyone to write information
- non hierarchical - no tree structures, but stuff connected to stuff.
http://info.cern.ch/images/proposal.gif
Tim Berner-Lee proposal
Hypertext
Provided an non hierarchical way of connecting pieces of information, by interlinking them, and resulting in a web of content.
Berner-Lee recognized the similarities between his concept for a single information space and the web like structure that hypertext allowed.
HTML
To put his ideas into practice Berner-Lee turned into one of the available markup languages, SGML. A snipped of SGML
He simplified, and added external hyperlink, to allow connection to external documents (in one direction).
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Greetings</h1>
<p>This is my homepage!</p>
</body>
</html>
The marking is done by enclosing content in the element that will format it <element>content</element>
Editor, Browser, Go
- Editor - your html writing tool
- Browser - the interpreter of html, but also a debug and prototyping space
golden rules
- In HTML the content is given meaning or structure by being with an element or tag.
- An element or tag is formed by angel brackets "<" and ">", like <h1> - the heading1 element
- In order to format content with tags you need to enter the content between an opening and closing element. As in the following case:
<h1>My Title</h1>
- <h1> is the opening tag
- </h1> is the closing tag
- "My Title" is the content that will be formatted by the h1 tag and become a title
- Once open a tag must be closed, either with
- an end tag:
<h1>Closing Heading 1</h1>
- self-closing tag:
<img src="nice_picture.jpg" />
html essential structural elements
- doctype
<!DOCTYPE HTML>- an indication to the browser of what content will be given to it to interpret - html - all the content of an html file
- head - invisible content: page title, character encoding, styles, etc. (not essential)
- body - visible content
essential tags
Comments: <!-- comments --> Header: <h1>,<h2>,<h3>,<h4> Paragraph: <p> Line break: <br /> italics: <i> bold: <b> lists: <ul> or <ol> list items: <li> div container: <div> span: <span> Hyperlink(requires arguments): <a href="http://thecolourclock.co.uk/">a link</a></code> Image(requires arguments): img src="nice_picture.jpg" />
Resources
Historical: http://home.web.cern.ch/topics/birth-web - on the birth of the Web at CERN from CERN
Technical:
- https://developer.mozilla.org/en-US/docs/Web/HTML - HTML (HyperText Markup Language)
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element - HTML element reference
- http://diveintohtml5.info - HTML 5
Day 2: the URL, linked and embed resources
URL
URL stands for Uniform Resource Locator. It is the global address for documents on the Web.
It is trough URLs that from our computers we request webpages and these appear in our browsers.
A URL , such as: http://mouchette.org/home/chezmoi.html be decomposed in to the following parts:
- http: the protocol
- mouchette.org: the domain name
- /home/chezmoi.html: the file path
Protocol
- http
- https
- ftp
Domain name
The domain name is like the address of webpages, or more precisely the alias to the page's true address, page's IP.
"[If you want]to access the Witness Web site you would type in the www.witness.org address, also known as a domain name, instead of 216.92.171.152. Your computer then sends a message with this name to a DNS server. After the DNS server translates the domain name into an IP address, it shares that information with your computer. This system makes Web browsing and other Internet applications more human-friendly for humans, and computer-friendly for computers."
From http://en.flossmanuals.net/bypassing-censorship/ch006_chapter-1-how/
file path
The file path indicates the location of page inside the computer (aka server) that hosts this webpage.
home/chezmoi.html indicates that the file we are requesting is inside the "home" folder is called "chezmoi.html".
Paths in my local page:
myfolder/ - the child folder myfolder/mysubfolder/ - the grand-grandchild ../ - the parent folder ../../ - the grand parent folder
Exercise:
- Create an HTML file, that uses other local files (images, html files, etc), stored in parent, current and child folders.
- Move the HTML file to a different directory
- Try to make all the local files are not broken in HTML file
iframe
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
The <iframe> Element embeds another HTML page into the current page.
iframe with local content
A solution to keep the same "header" and "footer" (outside the iframe) while the content keeps changing inside the iframe
iframe with remote content
embedding googles services
(later) https://developers.google.com/maps/documentation/embed/guide
embed
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed
The <embed> element, integrate external content, such as (youtube, vimeo) videos on to a html page
