The h1 tag indicates the primary header of the document.
140 |Some text.
141 |
139 |
142 |
143 | In CSS you can apply hierarchical styling like this:
144 |
145 | ::
146 |
147 | p {
148 | color: black;
149 | }
150 | div p {
151 | color: red;
152 | }
153 |
154 | So we have two rules here. The first says the text colour in paragraphs
155 | should be black. The second rule is more *specific* - it says the text in
156 | paragraphs should be red, but only if those paragraphs are inside of a
157 | div tag. A more specific rule always beats a less specific rule.
158 |
--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 | # Makefile for Sphinx documentation
2 | #
3 |
4 | # You can set these variables from the command line.
5 | SPHINXOPTS =
6 | SPHINXBUILD = sphinx-build
7 | PAPER =
8 | BUILDDIR = build
9 |
10 | # User-friendly check for sphinx-build
11 | ifeq ($(shell which $(SPHINXBUILD) >/dev/null 2>&1; echo $$?), 1)
12 | $(error The '$(SPHINXBUILD)' command was not found. Make sure you have Sphinx installed, then set the SPHINXBUILD environment variable to point to the full path of the '$(SPHINXBUILD)' executable. Alternatively you can add the directory with the executable to your PATH. If you don't have Sphinx installed, grab it from http://sphinx-doc.org/)
13 | endif
14 |
15 | # Internal variables.
16 | PAPEROPT_a4 = -D latex_paper_size=a4
17 | PAPEROPT_letter = -D latex_paper_size=letter
18 | ALLSPHINXOPTS = -d $(BUILDDIR)/doctrees $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) source
19 | # the i18n builder cannot share the environment and doctrees with the others
20 | I18NSPHINXOPTS = $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) source
21 |
22 | .PHONY: help clean html dirhtml singlehtml pickle json htmlhelp qthelp devhelp epub latex latexpdf text man changes linkcheck doctest gettext
23 |
24 | help:
25 | @echo "Please use \`make Welcome to Open Tech School
15 | 16 |HTML and CSS for beginners
22 |
72 |
73 | 
74 |
75 | Foto: Sjoerd van Oosten
76 |
74 |
101 |
102 |
103 |
104 | 
105 |
106 |
105 |
117 |
118 |
131 |
132 |
114 |
133 |
134 |
135 |
136 | 
137 |
138 |
137 |
159 |
160 |
161 |
162 | 
163 |
164 |
163 |
167 |
168 |
169 |
171 | 
172 |
173 |
Progressive Enhancement
170 |
172 |
216 |
217 |
218 |
219 |
220 |
221 |
--------------------------------------------------------------------------------
/presentation/scripts/script.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | var url = window.location,
3 | body = document.body,
4 | slides = document.querySelectorAll('div.slide'),
5 | progress = document.querySelector('div.progress div'),
6 | slideList = [],
7 | l = slides.length, i;
8 |
9 | for (i = 0; i < l; i++) {
10 | slideList.push({
11 | id: slides[i].id,
12 | hasInnerNavigation: null !== slides[i].querySelector('.inner')
13 | });
14 | }
15 |
16 | function getTransform() {
17 | var denominator = Math.max(
18 | body.clientWidth / window.innerWidth,
19 | body.clientHeight / window.innerHeight
20 | );
21 |
22 | return 'scale(' + (1 / denominator) + ')';
23 | }
24 |
25 | function applyTransform(transform) {
26 | body.style.WebkitTransform = transform;
27 | body.style.MozTransform = transform;
28 | body.style.msTransform = transform;
29 | body.style.OTransform = transform;
30 | body.style.transform = transform;
31 | }
32 |
33 | function enterSlideMode() {
34 | body.className = 'full';
35 | applyTransform(getTransform());
36 | }
37 |
38 | function enterListMode() {
39 | body.className = 'list';
40 | applyTransform('none');
41 | }
42 |
43 | function getCurrentSlideNumber() {
44 | var i, l = slideList.length,
45 | currentSlideId = url.hash.substr(1);
46 |
47 | for (i = 0; i < l; ++i) {
48 | if (currentSlideId === slideList[i].id) {
49 | return i;
50 | }
51 | }
52 |
53 | return -1;
54 | }
55 |
56 | function scrollToSlide(slideNumber) {
57 | if (-1 === slideNumber ) { return; }
58 |
59 | var currentSlide = document.getElementById(slideList[slideNumber].id);
60 |
61 | if (null != currentSlide) {
62 | window.scrollTo(0, currentSlide.offsetTop);
63 | }
64 | }
65 |
66 | function isListMode() {
67 | return 'full' !== url.search.substr(1);
68 | }
69 |
70 | function normalizeSlideNumber(slideNumber) {
71 | if (0 > slideNumber) {
72 | return slideList.length - 1;
73 | } else if (slideList.length <= slideNumber) {
74 | return 0;
75 | } else {
76 | return slideNumber;
77 | }
78 | }
79 |
80 | function updateProgress(slideNumber) {
81 | if (null === progress) { return; }
82 | progress.style.width = (100 / (slideList.length - 1) * normalizeSlideNumber(slideNumber)).toFixed(2) + '%';
83 | }
84 |
85 | function getSlideHash(slideNumber) {
86 | return '#' + slideList[normalizeSlideNumber(slideNumber)].id;
87 | }
88 |
89 | function goToSlide(slideNumber) {
90 | url.hash = getSlideHash(slideNumber);
91 |
92 | if (!isListMode()) {
93 | updateProgress(slideNumber);
94 | }
95 | }
96 |
97 | function getContainingSlideId(el) {
98 | var node = el;
99 | while ('BODY' !== node.nodeName && 'HTML' !== node.nodeName) {
100 | if (node.classList.contains('slide')) {
101 | return node.id;
102 | } else {
103 | node = node.parentNode;
104 | }
105 | }
106 |
107 | return '';
108 | }
109 |
110 | function dispatchSingleSlideMode(e) {
111 | var slideId = getContainingSlideId(e.target);
112 |
113 | if ('' !== slideId && isListMode()) {
114 | e.preventDefault();
115 |
116 | // NOTE: we should update hash to get things work properly
117 | url.hash = '#' + slideId;
118 | history.replaceState(null, null, url.pathname + '?full#' + slideId);
119 | enterSlideMode();
120 |
121 | updateProgress(getCurrentSlideNumber());
122 | }
123 | }
124 |
125 | // Increases inner navigation by adding 'active' class to next inactive inner navigation item
126 | function increaseInnerNavigation(slideNumber) {
127 | // Shortcut for slides without inner navigation
128 | if (true !== slideList[slideNumber].hasInnerNavigation) { return -1; }
129 |
130 | var activeNodes = document.querySelectorAll(getSlideHash(slideNumber) + ' .active'),
131 | // NOTE: we assume there is no other elements in inner navigation
132 | node = activeNodes[activeNodes.length - 1].nextElementSibling;
133 |
134 | if (null !== node) {
135 | node.classList.add('active');
136 | return activeNodes.length + 1;
137 | } else {
138 | return -1;
139 | }
140 | }
141 |
142 | // Event handlers
143 |
144 | window.addEventListener('DOMContentLoaded', function () {
145 | if (!isListMode()) {
146 | // "?full" is present without slide hash, so we should display first slide
147 | if (-1 === getCurrentSlideNumber()) {
148 | history.replaceState(null, null, url.pathname + '?full' + getSlideHash(0));
149 | }
150 |
151 | enterSlideMode();
152 | updateProgress(getCurrentSlideNumber());
153 | }
154 | }, false);
155 |
156 | window.addEventListener('popstate', function (e) {
157 | if (isListMode()) {
158 | enterListMode();
159 | scrollToSlide(getCurrentSlideNumber());
160 | } else {
161 | enterSlideMode();
162 | }
163 | }, false);
164 |
165 | window.addEventListener('resize', function (e) {
166 | if (!isListMode()) {
167 | applyTransform(getTransform());
168 | }
169 | }, false);
170 |
171 | document.addEventListener('keydown', function (e) {
172 | // Shortcut for alt, shift and meta keys
173 | if (e.altKey || e.ctrlKey || e.metaKey) { return; }
174 |
175 | var currentSlideNumber = getCurrentSlideNumber();
176 |
177 | switch (e.which) {
178 | case 116: // F5
179 | case 13: // Enter
180 | if (isListMode() && -1 !== currentSlideNumber) {
181 | e.preventDefault();
182 |
183 | history.pushState(null, null, url.pathname + '?full' + getSlideHash(currentSlideNumber));
184 | enterSlideMode();
185 |
186 | updateProgress(currentSlideNumber);
187 | }
188 | break;
189 |
190 | case 27: // Esc
191 | if (!isListMode()) {
192 | e.preventDefault();
193 |
194 | history.pushState(null, null, url.pathname + getSlideHash(currentSlideNumber));
195 | enterListMode();
196 | scrollToSlide(currentSlideNumber);
197 | }
198 | break;
199 |
200 | case 33: // PgUp
201 | case 38: // Up
202 | case 37: // Left
203 | case 72: // h
204 | case 75: // k
205 | e.preventDefault();
206 |
207 | currentSlideNumber--;
208 | goToSlide(currentSlideNumber);
209 | break;
210 |
211 | case 34: // PgDown
212 | case 40: // Down
213 | case 39: // Right
214 | case 76: // l
215 | case 74: // j
216 | e.preventDefault();
217 |
218 | // Only go to next slide if current slide have no inner
219 | // navigation or inner navigation is fully shown
220 | // NOTE: But first of all check if there is no current slide
221 | if (
222 | -1 === currentSlideNumber ||
223 | !slideList[currentSlideNumber].hasInnerNavigation ||
224 | -1 === increaseInnerNavigation(currentSlideNumber)
225 | ) {
226 | currentSlideNumber++;
227 | goToSlide(currentSlideNumber);
228 | }
229 | break;
230 |
231 | case 36: // Home
232 | e.preventDefault();
233 |
234 | currentSlideNumber = 0;
235 | goToSlide(currentSlideNumber);
236 | break;
237 |
238 | case 35: // End
239 | e.preventDefault();
240 |
241 | currentSlideNumber = slideList.length - 1;
242 | goToSlide(currentSlideNumber);
243 | break;
244 |
245 | case 9: // Tab = +1; Shift + Tab = -1
246 | case 32: // Space = +1; Shift + Space = -1
247 | e.preventDefault();
248 |
249 | currentSlideNumber += e.shiftKey ? -1 : 1;
250 | goToSlide(currentSlideNumber);
251 | break;
252 |
253 | default:
254 | // Behave as usual
255 | }
256 | }, false);
257 |
258 | document.addEventListener('click', dispatchSingleSlideMode, false);
259 | document.addEventListener('touchend', dispatchSingleSlideMode, false);
260 |
261 | document.addEventListener('touchstart', function (e) {
262 | if (!isListMode()) {
263 | var currentSlideNumber = getCurrentSlideNumber(),
264 | x = e.touches[0].pageX;
265 | if (x > window.innerWidth / 2) {
266 | currentSlideNumber++;
267 | } else {
268 | currentSlideNumber--;
269 | }
270 |
271 | goToSlide(currentSlideNumber);
272 | }
273 | }, false);
274 |
275 | document.addEventListener('touchmove', function (e) {
276 | if (!isListMode()) {
277 | e.preventDefault();
278 | }
279 | }, false);
280 |
281 | }());
282 |
--------------------------------------------------------------------------------
/source/conf.py:
--------------------------------------------------------------------------------
1 | # -*- coding: utf-8 -*-
2 | #
3 | # Basic Web Site Construction documentation build configuration file, created by
4 | # sphinx-quickstart on Wed Jan 29 18:29:50 2014.
5 | #
6 | # This file is execfile()d with the current directory set to its
7 | # containing dir.
8 | #
9 | # Note that not all possible configuration values are present in this
10 | # autogenerated file.
11 | #
12 | # All configuration values have a default; values that are commented out
13 | # serve to show the default.
14 |
15 | import sys
16 | import os
17 |
18 | # If extensions (or modules to document with autodoc) are in another directory,
19 | # add these directories to sys.path here. If the directory is relative to the
20 | # documentation root, use os.path.abspath to make it absolute, like shown here.
21 | #sys.path.insert(0, os.path.abspath('.'))
22 |
23 | # -- General configuration ------------------------------------------------
24 |
25 | # If your documentation needs a minimal Sphinx version, state it here.
26 | #needs_sphinx = '1.0'
27 |
28 | # Add any Sphinx extension module names here, as strings. They can be
29 | # extensions coming with Sphinx (named 'sphinx.ext.*') or your custom
30 | # ones.
31 | extensions = [
32 | 'sphinx.ext.pngmath',
33 | ]
34 |
35 | # Add any paths that contain templates here, relative to this directory.
36 | templates_path = ['_templates']
37 |
38 | # The suffix of source filenames.
39 | source_suffix = '.rst'
40 |
41 | # The encoding of source files.
42 | #source_encoding = 'utf-8-sig'
43 |
44 | # The master toctree document.
45 | master_doc = 'index'
46 |
47 | # General information about the project.
48 | project = u'Basic Web Site Construction'
49 | copyright = u'2014, OpenTechSchool'
50 |
51 | # The version info for the project you're documenting, acts as replacement for
52 | # |version| and |release|, also used in various other places throughout the
53 | # built documents.
54 | #
55 | # The short X.Y version.
56 | version = '1.0'
57 | # The full version, including alpha/beta/rc tags.
58 | release = '1.0'
59 |
60 | # The language for content autogenerated by Sphinx. Refer to documentation
61 | # for a list of supported languages.
62 | #language = None
63 |
64 | # There are two options for replacing |today|: either, you set today to some
65 | # non-false value, then it is used:
66 | #today = ''
67 | # Else, today_fmt is used as the format for a strftime call.
68 | #today_fmt = '%B %d, %Y'
69 |
70 | # List of patterns, relative to source directory, that match files and
71 | # directories to ignore when looking for source files.
72 | exclude_patterns = []
73 |
74 | # The reST default role (used for this markup: `text`) to use for all
75 | # documents.
76 | #default_role = None
77 |
78 | # If true, '()' will be appended to :func: etc. cross-reference text.
79 | #add_function_parentheses = True
80 |
81 | # If true, the current module name will be prepended to all description
82 | # unit titles (such as .. function::).
83 | #add_module_names = True
84 |
85 | # If true, sectionauthor and moduleauthor directives will be shown in the
86 | # output. They are ignored by default.
87 | #show_authors = False
88 |
89 | # The name of the Pygments (syntax highlighting) style to use.
90 | pygments_style = 'sphinx'
91 | highlight_language = 'css'
92 |
93 | # A list of ignored prefixes for module index sorting.
94 | #modindex_common_prefix = []
95 |
96 | # If true, keep warnings as "system message" paragraphs in the built documents.
97 | #keep_warnings = False
98 |
99 |
100 | # -- Options for HTML output ----------------------------------------------
101 |
102 | # The theme to use for HTML and HTML Help pages. See the documentation for
103 | # a list of builtin themes.
104 | try:
105 | import sphinx_bootstrap_theme
106 | html_theme = 'bootstrap'
107 | html_theme_path = sphinx_bootstrap_theme.get_html_theme_path()
108 | except ImportError:
109 | html_theme = 'default'
110 |
111 | # Theme options are theme-specific and customize the look and feel of a theme
112 | # further. For a list of options available for each theme, see the
113 | # documentation.
114 | #html_theme_options = {}
115 |
116 | # Add any paths that contain custom themes here, relative to this directory.
117 | #html_theme_path = []
118 |
119 | # The name for this set of Sphinx documents. If None, it defaults to
120 | # "
`` tag. 131 | 132 | Inside that tag you can write some text that will be displayed to the 133 | user. 134 | 135 | For example: ``
Hi I am Mr. Smith. Feel free to contact me.
`` 136 | 137 | You also can add a linebreak after the first sentence with a ```` 138 | tag and maybe you want to highlight your name by making it italic: 139 | ``Mr. Smith``. 140 | 141 | If you want to add more styling to the paragraph you should do that in 142 | the CSS file. Just add a class to the paragraph 143 | ``
`` and over in the CSS file add some styling 144 | to the text: 145 | 146 | :: 147 | 148 | .contact-intro { 149 | font-size: 20px; 150 | font-family: Arial; 151 | margin: 10px; 152 | } 153 | 154 | That's it for the short introduction. Now let's get to the links where 155 | visitors of your site can actually contact you. 156 | 157 | Just create a list for the different contact options using the 158 | ``
- ``.
160 |
161 | For now we want to add links to Mail, Twitter, Facebook and Github. So
162 | you have to create four list items with ``
- `` tags. 163 | 164 | Inside each item you add a link tag so the user of your site can click 165 | on something. You can do that using an `` `` tag. You 166 | can ignore the ``href`` attribute for now. We will cover that later to 167 | make the links actually work. 168 | 169 | In general you can use everything as a link. A button element, an image 170 | or just plain text. But let's create a stylish icon using CSS here. 171 | 172 | For doing so add the first letter of the name of each link in the link 173 | tag and add some classes to the links so you can style them. Add one 174 | class ``contact-link`` to each link to apply styles to all links and add 175 | a unique class for each link (``mail``, ``twitter``, ``facebook``, 176 | ``github``). The whole list should look like the following: 177 | 178 | :: 179 | 180 | 186 | 187 | If you like you can replace each # above with the URL to your respective 188 | social network account. 189 | 190 | And now you can style the links using CSS. 191 | 192 | You can change the font, create a box for each link in a different 193 | colour and position the letter pixel perfect for each link individually. 194 | 195 | Here is some simple styling. Have a look at it and adjust it to your 196 | needs: 197 | 198 | :: 199 | 200 | .contact-links { 201 | padding: 0; 202 | list-style-type: none; 203 | } 204 | 205 | .contact-link { 206 | display: block; 207 | float: left; 208 | margin: 10px; 209 | text-decoration: none; 210 | color: white; 211 | font-family: Arial; 212 | font-weight: 900; 213 | font-size: 35px; 214 | } 215 | 216 | .mail { 217 | background: #dd1812; 218 | width: 39px; 219 | height: 45px; 220 | padding: 1px 0 0 9px; 221 | } 222 | 223 | .twitter { 224 | background: #00acee; 225 | width: 30px; 226 | height: 42px; 227 | padding: 4px 0 0 18px; 228 | } 229 | 230 | .facebook { 231 | background: #3B5998; 232 | width: 30px; 233 | height: 42px; 234 | padding: 4px 0 0 18px; 235 | } 236 | 237 | .github { 238 | background: #171515; 239 | width: 35px; 240 | height: 46px; 241 | padding: 0 0 0 13px; 242 | } 243 | 244 | That's it for this section. Feel free to extend and customize the 245 | contact page in every way you can imagine. 246 | 247 | tag 248 | ------- 249 | 250 | Good! Our portfolio is almost ready. Now we need just one more thing: to 251 | link all your pages together. To do that there is a special tag: a tag 252 | (anchor) that defines a hyperlink. The most important attribute of the < 253 | a > element is the href attribute, which indicates the link’s 254 | destination. So the HTML syntrax for a link look like this: 255 | 256 | :: 257 | 258 | Link text 259 | 260 | There are different types of links. You can create an **external link**, 261 | a link that go to another web site. This link is absolute and basically 262 | need all the line that usually you see or type in the Url bar of your 263 | browser. If we want to link our web site to the OTS site, it look like 264 | this: 265 | 266 | :: 267 | 268 | OpenTechSchool 269 | 270 | Also very important is the Internal link or rather a link that point on 271 | your own web site, point just to another page of the same website. And 272 | that one is also the one we need right now, so let's proceed with our 273 | portfolio. In our nav menu, we need to add an ```` tag to our li elements: 274 | 275 | :: 276 | 277 |
- Home | 278 | 279 | Be careful to type the url right. If the page to which you are going to 280 | link is not in the same root, in the same folder of your file, you need 281 | to specify in which one it can be found. For example, if I have the 282 | contact page in a contact folder I write: 283 | 284 | :: 285 | 286 |
- Contact 287 | 288 | Check in the browser and... Done! Now you can do the same for the rest 289 | of your nav menu and for your social buttons links. 290 | 291 | By default the ```` tag is styled like this: 292 | 293 | - An unvisited link is underlined and blue 294 | - A visited link is underlined and purple 295 | - An active link is underlined and red 296 | 297 | You can change the style and the colour by selecting the ```` tag. 298 | 299 | There is still at least one important link to explain. The **mailto** link. 300 | Write ``href="mailto:myemail@google.com"`` tell to the browser to open the 301 | default email program on the user machine with the email destination field 302 | already fill in. Nice, isn't it? So go ahead and write the mailto link 303 | with your personal email instead of # in your contact list and try it 304 | out. 305 | 306 | To get the nice effect of changing the color of a link when the mouse 307 | moves over it, you need to use the ``:hover`` selector. 308 | Because we don't need to set the class manually, 309 | but rather the browser does it automatically, it's called **pseudo class**. 310 | 311 | :: 312 | 313 | a:hover { 314 | color: red; 315 | } 316 | 317 | Great! We are done but if you still have a time keep going to play with 318 | your portfolio, make it nicer, change colors, fonts, add images or 319 | whatever you like most and be ready for present it at the end of the 320 | workshop. We want to see your amazing personal website! 321 | 322 | Don't hesitated to ask to our coaches if you have any question. 323 | -------------------------------------------------------------------------------- /source/core/structure.rst: -------------------------------------------------------------------------------- 1 | The template structure 2 | ====================== 3 | 4 | .. highlight:: html 5 | 6 | Preamble: How to write a HTML document 7 | -------------------------------------- 8 | 9 | This is actually pretty simple: HTML is written as a plain text 10 | document. A HTML file always uses the extension **.html** to indicate 11 | its filetype. 12 | 13 | Text editor 14 | ----------- 15 | 16 | You will need a plain text editor in order to edit HTML files. 17 | 18 | You can also get fully graphical WYSIWYG (What You See Is What You Get) 19 | HTML editors, that let you edit the web page graphically with a similar 20 | interface to programs like Word. These can be useful, but many people 21 | working with HTML & CSS prefer a plain text editor and that's what we'll 22 | be using today. 23 | 24 | If you already have a plain text editor installed (perhaps from a 25 | previous OTS workshop) then you'll be fine. Otherwise here are some 26 | suggestions: 27 | 28 | Windows 29 | ~~~~~~~ 30 | 31 | `Notepad++
- `` represents a 'list item'. You'll notice they're always
103 | surrounded by angle backets. *Opening* and *Closing* tags mark the
104 | beginning and end of an element and wrap its content, like so:
105 |
106 | ::
107 |
108 |
This is a paragraph.
109 | 110 | You can see the closing tag includes a ``/`` before its name; otherwise 111 | it would be another opening tag! 112 | 113 | **Always** double-check that you've closed all your elements; otherwise, 114 | a browser can and will get mixed up trying to understand your HTML 115 | document. 116 | 117 | There are some specific elements that are exceptions to this rule. When 118 | elements cannot contain anything else, then they don't need to be 119 | closed. For example, the following elements are referred to as 120 | 'self-closing': 121 | 122 | :: 123 | 124 |
125 | 126 |127 | 128 | There aren't so many of such elements, and you should easily pick up 129 | which are which by writing some more code :) 130 | 131 | Lastly, having elements inside of each other ("nesting") looks just like this: 132 | 133 | :: 134 | 135 |
This is a sentence, with a em element ("emphasize") inside it.
136 | 137 | or this: 138 | 139 | :: 140 | 141 |142 |145 | 146 | You'll notice that HTML doesn't actually care about the whitespace or 147 | newlines *between* tags. It would end up looking the same if the above 148 | had been fit onto one line. 149 | 150 | In the above example, you can see our first case of an **attribute**. It 151 | starts with a lowercase name, and then is almost always followed by an 152 | ``=`` and a 'value' that's surrounded in double quotes, ``"like this"``. 153 | An element can have many attributes, in which case you separate them by 154 | spaces, as you'll see soon. Attributes give information about an element 155 | in particular. 156 | 157 | In this case, the ``The h1 tag indicates the primary header of the document.
143 |Some text.
144 |`` tag (which is used to *divide* groups of 158 | elements up) has an ``id`` attribute with the value ``main-content``. 159 | That's telling us that this section of the document is designed to hold the 160 | main content on the page opposed to e.g. a sidebar or navigation. 161 | You will learn more about specific attributes later! 162 | 163 | Html and Head Elements 164 | ---------------------- 165 | 166 | Coming back to our file (hope you're coding along!), after the doctype 167 | we begin our document with a root ``html`` element, just like so: 168 | 169 | :: 170 | 171 | 172 | 173 | 174 | It encompasses every other element in our HTML document, nothing should 175 | go outside it! Next, the document is broken up into two important parts: 176 | The **head** and **body**. 177 | 178 | The head contains the title of the page & information **about** the page 179 | (*meta* information). Most meta information isn't visible to the user, 180 | but it has many purposes. For example, meta elements can tell search 181 | engines information about your page, such as who created it and a 182 | description of your page's content. Here's an example ``head`` element: 183 | 184 | :: 185 | 186 | 187 | 188 | 189 |My first Portfolio 190 | 191 | 192 | You can see meta tags are one of the self-closing elements! First off, 193 | there is a charset meta tag. This is the most important meta tag. 194 | Without it your website might not display properly. It is best practice 195 | to include it as the first element inside the head element. Basically, 196 | it specifies to the browser the character encoding for the HTML 197 | document. That means your browser will be able to read and correctly 198 | display all the special characters such as €, $, è and so on. ``UTF-8`` 199 | is usually the best general encoding to use. 200 | 201 | Here we've also written another type of a meta tag, the description. We 202 | define what kind of meta tag it is with the ``name`` attribute and put 203 | our description in the *value* of the content attribute. 204 | 205 | Inside our head element, we have lastly written a title of our website. 206 | Chuck the above code in your file (inside your ``html`` element), and 207 | change the content of the ````. Then you can check your document 208 | by opening your file in a browser and looking at what is written in your 209 | browser toolbar. That also provides a title for the page when it is 210 | added to favorites. 211 | 212 | Head tags can also include external files or resources, such as CSS or 213 | JavaScript files. We will see later how to do this. 214 | 215 | The Body 216 | -------- 217 | 218 | Finally, we are at the place where our content goes. The body contains 219 | the actual content of the page. Everything that is contained in the body 220 | is visible to the user. 221 | 222 | Just after the closing head tag but still inside the html element, let's 223 | add the body tags. 224 | 225 | :: 226 | 227 | <body> 228 | </body> 229 | 230 | Everything that is written inside this tag will be displayed to the 231 | user. Add a ``<body>`` to your existing HTML document and then write 232 | some plain text between the body tags and view it in your browser. 233 | 234 | **TIP**: To reload the same HTML document in the browser, use the Reload 235 | Current Page function (Ctrl-R or F5) 236 | 237 | Types of content 238 | ---------------- 239 | 240 | There are different HTML elements that we can use to indicate different 241 | types of content in our document, like the 242 | 243 | :: 244 | 245 | <p></p> 246 | 247 | tags which we have already met. Let's try writing a title, followed by a 248 | paragraph. 249 | 250 | :: 251 | 252 | <body> 253 | <h1>I'm the title.</h1> 254 | <p>And I'm a paragraph!</p> 255 | </body> 256 | 257 | Heading elements are straightforward to understand. They start from h1 258 | with the biggest font and importance, going to h6 with the smallest 259 | font. 260 | 261 | Indentation 262 | ----------- 263 | 264 | Are you wondering why we wrote the h1 and p tags *indented* inside the 265 | body tags? 266 | 267 | That will not change at all how the browser reads or interpretates the 268 | document, but it is a good practice among developers to write code like 269 | that in order to have a more clear document and still be able to work 270 | with it even after a long time or when there is a lot of lines of code. 271 | It also shows the heircharcical nature of HTML pretty well. 272 | 273 | Comments 274 | -------- 275 | 276 | It is also possible to put "comments" in your HTML. Comments in HTML are 277 | there to remind you (or other people editing the HTML file) without 278 | changing the way the page displays in a browser. 279 | 280 | Like other HTML elements, comments are written by using a tag. Although 281 | comment tags look a little different: 282 | 283 | :: 284 | 285 | <!-- I am a comment --> 286 | 287 | The "start comment" tag is ``<!--`` and the "end comment" tag is 288 | ``-->``. 289 | 290 | Comments can also enclose other HTML elements, to "comment them out". 291 | This is a useful technique when you're experimenting with a page to see 292 | how it looks when you change things around. 293 | 294 | For example, try commenting out the ``h1`` heading in your current page: 295 | 296 | :: 297 | 298 | <body> 299 | <!-- <h1>I'm the title.</h1> --> 300 | <p>And I'm a paragraph!</p> 301 | </body> 302 | 303 | If you reload the page in your browser, you'll notice the heading has 304 | vanished. 305 | 306 | Remove the comment tags (so the heading appears again) before moving on 307 | to the next section. 308 | 309 | Images 310 | ------ 311 | 312 | Headings and paragraphs give you the basics of text. What about images? 313 | 314 | Images have to be kept in separate image files, outside the HTML file. Find 315 | a favourite image on the web and save it in the same directory as your 316 | HTML file (right-click the image in your browser and "Save Image..."). 317 | 318 | If you don't have a picture in mind then `here's a page with a photo of 319 | some kittens that you can 320 | use <http://www.flickr.com/photos/nengard/67501122/sizes/s/>`__ (Cute 321 | cats on the internet? Egad!) 322 | 323 | After you have your image, you can include it in your HTML page by using 324 | an ``<img>`` tag. 325 | 326 | :: 327 | 328 | <img src="kittens.jpg"> 329 | 330 | Add the ``<img>`` tag anywhere inside the "body" of your HTML document 331 | where you'd like the image to appear. Replace "kittens.jpg" with the 332 | file name of the image that you saved in the same directory as the HTML 333 | file. 334 | 335 | Notice that ``<img>`` is one of the tags that doesn't need a sepaate 336 | closing tag. You could put ``</img>`` after the tag if you like, it 337 | doesn't change the way the browser views the page. 338 | 339 | **TIP:** The image source name ("src") of ``kittens.jpg`` is a path 340 | relative to the HTML document. So in this case ``kittens.jpg`` is 341 | located in the same directory, but you could use a name like 342 | ``"images/kittens.jpg"`` if you put the image file into a subdirectory 343 | called "images". You can even use full URLs like 344 | ``"http://myawesomesite.com/pictures/kittens.jpg"``, but it's best to 345 | avoid this if you can use a relative path instead. 346 | 347 | Alt Text 348 | ~~~~~~~~ 349 | 350 | A good habit to get into is using "alt text" to describe the contents of 351 | an image: 352 | 353 | :: 354 | 355 | <img src="kittens.jpg" alt="Some kittens"> 356 | 357 | The alt text is a textual description of what's in the image. This is 358 | important for anyone who can't see the images (for instance vision 359 | impaired people using a screenreader.) Any image that isn't purely 360 | decorative should have a description set with the "alt=" attribute. 361 | 362 | Putting it all together 363 | ----------------------- 364 | 365 | So far, our entire document might look like this: 366 | 367 | :: 368 | 369 | <!DOCTYPE html> 370 | <html> 371 | <head> 372 | <meta charset="UTF-8"> 373 | <meta name="description" content="Free Web tutorials"> 374 | <title>My first Portfolio 375 | 376 | 377 |I'm the title.
378 |And I'm a paragraph!
379 |380 |
382 |
381 | This is a sub-heading...
383 |Well now we're just blathering on.
384 | 385 |
`` tag indicates a paragraph of text is in that element, and 102 | the ``