forked from IsaKiko/D3-visualising-data
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path01-html.html
121 lines (121 loc) · 9.5 KB
/
01-html.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="pandoc">
<title>Software Carpentry: HTML</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="css/swc.css" />
<link rel="alternate" type="application/rss+xml" title="Software Carpentry Blog" href="http://software-carpentry.org/feed.xml"/>
<meta charset="UTF-8" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body class="lesson">
<div class="container card">
<div class="banner">
<a href="http://software-carpentry.org" title="Software Carpentry">
<img alt="Software Carpentry banner" src="img/software-carpentry-banner.png" />
</a>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1 class="title">HTML</h1>
<h2 class="subtitle">Making things appear in your browser</h2>
<div id="learning-objectives" class="objectives panel panel-warning">
<div class="panel-heading">
<h2 id="learning-objectives" class="objectives panel panel-warning"><span class="glyphicon glyphicon-certificate"></span>Learning Objectives</h2>
</div>
<div class="panel-body">
<ul>
<li>Create your first web page and view it in a browser</li>
<li>Understand the structure of an HTML document</li>
<li>Understand the different elements within an HTML document</li>
</ul>
</div>
</div>
<p>A way of writing that is understood by all web browsers is HTML: hypertext markup language. Since we don’t have the ability to do logical operations (loops, etc.) with HTML alone, it’s not technically a programming language.</p>
<p>Let’s see how we can get our browser to greet the world. We need to:</p>
<ul>
<li>Create a local folder <code>gapminder_datavis</code></li>
<li>In the folder, create the file <code>index.html</code></li>
<li>Open the file with a text editor</li>
</ul>
<p>Now, if we want to open our new file in a browser, we have to tell it what kind of file to expect. To do this, we start our file with:</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb1-1" data-line-number="1"><span class="dt"><!DOCTYPE </span>html<span class="dt">></span></a>
<a class="sourceLine" id="cb1-2" data-line-number="2"><span class="kw"><html></span></a>
<a class="sourceLine" id="cb1-3" data-line-number="3"> <span class="co"><!-- Everything goes in here --></span></a>
<a class="sourceLine" id="cb1-4" data-line-number="4"><span class="kw"></html></span></a></code></pre></div>
<p>Comments (ignored by the browser) starts with <code><!--</code> and ends with <code>--></code>.</p>
<p>Every good webpage consists of a head and a body. The header (<code><head></code> to open and <code></head></code> to close) normally contains any meta-data. This could be name of the page or the inclusion of other files.</p>
<p>The body (<code><body></code> to open and <code></body></code> to close) is where all our content should go. So everything we type between the brackets will be displayed on our page.</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb2-1" data-line-number="1"><span class="kw"><head></span></a>
<a class="sourceLine" id="cb2-2" data-line-number="2"><span class="kw"></head></span></a>
<a class="sourceLine" id="cb2-3" data-line-number="3"><span class="kw"><body></span></a>
<a class="sourceLine" id="cb2-4" data-line-number="4"> Hello, world!</a>
<a class="sourceLine" id="cb2-5" data-line-number="5"><span class="kw"></body></span></a></code></pre></div>
<p>Since our browser understands this language, we can instantly open our local index.html file and the browser will interpret our code as visual components.</p>
<p>HTML has more predefined elements that will vary in size and style. To divide the page into different section, we can create a division using <code><div></code> to open and <code></div></code> to close it.</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb3-1" data-line-number="1"><span class="dt"><!DOCTYPE </span>html<span class="dt">></span></a>
<a class="sourceLine" id="cb3-2" data-line-number="2"><span class="kw"><html></span></a>
<a class="sourceLine" id="cb3-3" data-line-number="3"> <span class="kw"><head></span></a>
<a class="sourceLine" id="cb3-4" data-line-number="4"> <span class="co"><!-- meta-data (like page title, inclusion of other files) --></span></a>
<a class="sourceLine" id="cb3-5" data-line-number="5"> <span class="kw"></head></span></a>
<a class="sourceLine" id="cb3-6" data-line-number="6"> <span class="kw"><body></span></a>
<a class="sourceLine" id="cb3-7" data-line-number="7"> <span class="kw"><div></span>Hello, world!<span class="kw"></div></span></a>
<a class="sourceLine" id="cb3-8" data-line-number="8"> <span class="kw"><div></span>Hi world, I'm dad!<span class="kw"></div></span></a>
<a class="sourceLine" id="cb3-9" data-line-number="9"> <span class="kw"></body></span></a>
<a class="sourceLine" id="cb3-10" data-line-number="10"><span class="kw"></html></span></a></code></pre></div>
<p>HTML offers many useful typographical elements. Here are a few common ones:</p>
<ul>
<li><code><h1></code>, <code><h2></code>, and so on</li>
<li><code><strong></code> and <code><em></code></li>
<li><code><blockquote></code> and <code><pre></code></li>
</ul>
<p>We can also insert a title for our browser page, as below:</p>
<div class="sourceCode" id="cb4"><pre class="sourceCode html"><code class="sourceCode html"><a class="sourceLine" id="cb4-1" data-line-number="1"><span class="dt"><!DOCTYPE </span>html<span class="dt">></span></a>
<a class="sourceLine" id="cb4-2" data-line-number="2"><span class="kw"><html></span></a>
<a class="sourceLine" id="cb4-3" data-line-number="3"> <span class="kw"><head></span></a>
<a class="sourceLine" id="cb4-4" data-line-number="4"> <span class="co"><!-- meta-data (like page title, inclusion of other files) --></span></a>
<a class="sourceLine" id="cb4-5" data-line-number="5"> <span class="kw"><title></span>My first webpage!<span class="kw"></title></span></a>
<a class="sourceLine" id="cb4-6" data-line-number="6"> <span class="kw"></head></span></a>
<a class="sourceLine" id="cb4-7" data-line-number="7"> <span class="kw"><body></span></a>
<a class="sourceLine" id="cb4-8" data-line-number="8"> <span class="kw"><div><strong></span>Hello, world!<span class="kw"></strong></div></span></a>
<a class="sourceLine" id="cb4-9" data-line-number="9"> <span class="kw"><div><em></span>Hi world, I'm dad!<span class="kw"></em></div></span></a>
<a class="sourceLine" id="cb4-10" data-line-number="10"> <span class="kw"></body></span></a>
<a class="sourceLine" id="cb4-11" data-line-number="11"><span class="kw"></html></span></a></code></pre></div>
<p>Try the following tasks to make yourself more comfortable with HTML. You will find the search engine useful if you are not sure how to do it. Feel free to ask for help!</p>
<div id="your-turn-getting-the-webpage-started" class="challenge panel panel-success">
<div class="panel-heading">
<h2 id="your-turn-getting-the-webpage-started" class="challenge panel panel-success"><span class="glyphicon glyphicon-pencil"></span>Your turn: Getting the webpage started</h2>
</div>
<div class="panel-body">
<ol type="1">
<li>Create a heading for the page, and call it “The Wealth & Health of Nations”.</li>
<li>Make the heading in italics.</li>
<li>Credit Gapminder data by creating a hyperlink back to their website. Use the text “Data source: Gapminder”.</li>
</ol>
</div>
</div>
<p>Useful resources are also the <a href="https://developer.mozilla.org/en-US/">MDN documentation</a> and <a href="http://www.w3schools.com">w3school</a>.</p>
<p>You are also encouraged to use the Developer Tools in your browser (Ctrl+Shift+I on Windows, or Cmd+Options+I on MacOS) to inspect sources of HTML and see how others work.</p>
<p>Another way to get to the Developer Tools is right-click on any element on the page and select ‘Inspect element’. It should open and you should be in the ‘Elements’ tab. Here, you can navigate through the HTML file and inspect properties at the same time.</p>
</div>
</div>
<div class="footer">
<a class="label swc-blue-bg" href="http://software-carpentry.org">Software Carpentry</a>
<a class="label swc-blue-bg" href="https://github.com/swcarpentry/lesson-template">Source</a>
<a class="label swc-blue-bg" href="mailto:[email protected]">Contact</a>
<a class="label swc-blue-bg" href="LICENSE.html">License</a>
</div>
</div>
<!-- Javascript placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script src="css/bootstrap/bootstrap-js/bootstrap.js"></script>
</body>
</html>