THIS POST PICK UP WHERE THE HTML & CSS PAGE LEFT OF
Explanations
- Always put
on the first line. It tells the browser about the type of the document. - The
tag indicates the start and
- Within the
, there should be an indication about the character set:. If you do not specify the character set some special characters may not get displayed correctly. You might have noticed that theelement has no closing tag. There are a few elements without closing tags, but they are the exception. - Next you'll see the
</code></span> element. The title is displayed in the title bar at the top of your browser window.</span></li> </ul> </li> <li><span style="font-family: Verdana,sans-serif;">Everything inside the <code><body></code> element is displayed in the main area of the browser.</span><ul> <li><span style="font-family: Verdana,sans-serif;">A <code><h1> </code> defines the main heading. Sub headings can be created with <span style="color: rgb(255, 0, 0);"><code><h2> </code>, <code><h3> </code>, <code><h4> </code>, <code><h5> </code>, </span>and<span style="color: rgb(255, 0, 0);"> <code><h6> </code>.</span></span></li> <li><span style="font-family: Verdana,sans-serif;">Text between<span style="color: rgb(255, 0, 0);"> <code><p> </code> </span>and<span style="color: rgb(255, 0, 0);"><code></p> </code></span> is a paragraph.</span></li> </ul> </li> <li><span style="font-family: Verdana,sans-serif;">After each opening tag, the next element should be indented (with a tab or two spaces) for better overview. Make sure you follow this habit.</span></li> </ul> <h2 style="text-align: justify;" data-blogger-escaped-style="text-align: center;"> <font data-blogger-escaped-style="color: #3d85c6;" color="#3d85c6"><font data-blogger-escaped-style="color: #38761d;" color="#38761d"> </font></font><font data-blogger-escaped-style="color: #3d85c6;" color="#3d85c6"><font data-blogger-escaped-style="color: #38761d;" color="#38761d"><p style="text-align: center; clear: both;" class="separator"> <a style="clear: left; margin-bottom: 1em; float: left; margin-right: 1em;" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsDojnywkBMrBMLU-2tJ7PwMuG7GHMX5HfRTDTO_IZ4qacMkfwC3Kx95k5ctg1A6LAt-VOIg5QTo9qR49BYP5OTe9cE3RBagLFNahb_HGhmIznbwP0uTBFJpR3z7DS7h9qFB5Teo9wfkDS/s1600/Note-1.PNG" imageanchor="1"><img data-original-height="121" data-original-width="847" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsDojnywkBMrBMLU-2tJ7PwMuG7GHMX5HfRTDTO_IZ4qacMkfwC3Kx95k5ctg1A6LAt-VOIg5QTo9qR49BYP5OTe9cE3RBagLFNahb_HGhmIznbwP0uTBFJpR3z7DS7h9qFB5Teo9wfkDS/s1600/Note-1.PNG" style="" border="0"></a><font data-blogger-escaped-style="color: #3d85c6;" color="#3d85c6"><font data-blogger-escaped-style="color: #38761d;" color="#38761d"> </font></font></p> </font></font><br></h2> <h2 style="text-align: justify;" data-blogger-escaped-style="text-align: center;"> <span style="font-family: Verdana,sans-serif;"> <font data-blogger-escaped-style="color: #3d85c6;" color="#3d85c6"><font data-blogger-escaped-style="color: #38761d;" color="#38761d"><br></font></font></span></h2> <p style="text-align: justify;"> <span style="font-family: Verdana,sans-serif;">With these basic HTML elements we are well prepared to bring our website to a new level. First, let's add an image so that the home page of our portfolio looks a bit more interesting.</span></p> <div style="text-align: justify;"> <span style="font-family: Verdana,sans-serif;"> </span></div> <h2 style="text-align: justify;" id="inserting-an-image"> <span style="font-family: Verdana,sans-serif;">Inserting an Image</span></h2> <div style="text-align: justify;"> <span style="font-family: Verdana,sans-serif;"> </span></div> <p style="text-align: justify;"> <span style="font-family: Verdana,sans-serif;">To insert an image we use the <span style="color: rgb(255, 0, 0);"><code><img></code></span> element. The following example will insert my picture:</span></p> <p style="clear: both; text-align: justify;" class="separator"> <span style="font-family: Verdana,sans-serif;"><a style="clear: left; margin-bottom: 1em; float: left; margin-right: 1em;" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0yFnCwXSgWeU_w1b7F3eNXBbiKRD7kHv0I2fS6fQPw-F1oALuVAKzjzvpfljRKMxoMT6SHllXXB6fWU-TyNqIp4ZfeQ4euj_tc6_oqpZVibCgLYoHun_yxzjBGo3XicBKTAcV99gGPric/s1600/image+tag.PNG" imageanchor="1"><img data-original-height="50" data-original-width="847" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0yFnCwXSgWeU_w1b7F3eNXBbiKRD7kHv0I2fS6fQPw-F1oALuVAKzjzvpfljRKMxoMT6SHllXXB6fWU-TyNqIp4ZfeQ4euj_tc6_oqpZVibCgLYoHun_yxzjBGo3XicBKTAcV99gGPric/s1600/image+tag.PNG" style="" border="0"></a></span></p> <p style="text-align: justify;"> <span style="font-family: Verdana,sans-serif;"> </span></p> <p style="text-align: justify;"> <span style="font-family: Verdana,sans-serif;">The <code><img></code> element only has one opening but no closing tag. It contains a <span style="color: rgb(255, 0, 0);"><code>src</code></span> and an <code>alt</code> attribute. The <span style="color: rgb(255, 0, 0);"><code>src</code></span> attribute specifies the <abbr data-original-title="Uniform Resource Locator" data-toggle="tooltip" title="">URL</abbr>, that is the location and file name of the image. The <span style="color: rgb(255, 0, 0);"><code>alt</code></span> attribute is an "alternative text", which describes the content of the image. This text is used by search engines and if for some reason the image can not be displayed, for example on a screen reader for the blind.</span></p> <div style="text-align: justify;"> <span style="font-family: Verdana,sans-serif;"> </span></div> <h3 style="text-align: justify;" id="relative-and-absolute-urls"> <span style="font-family: Verdana,sans-serif;">Relative and Absolute URLs</span></h3> <div style="text-align: justify;"> <span style="font-family: Verdana,sans-serif;"> </span></div> <p style="text-align: justify;"> <span style="font-family: Verdana,sans-serif;">URLs are used for the <span style="color: rgb(255, 0, 0);"><code>src</code></span> attribute of images and also for the <span style="color: rgb(255, 0, 0);"><code>href</code></span> attribute of links. The URL specifies the "address" of a file (for example another web page or an image). Depending on the location of the file, either a <em>relative</em> or <em>absolute</em> URL must be used.</span></p> <p style="text-align: justify;"> <span style="font-family: Verdana,sans-serif;"> </span></p> <div style="text-align: justify;"> <span style="font-family: Verdana,sans-serif;"> </span></div> <p style="text-align: justify;"> <span style="font-family: Verdana,sans-serif;">If a file <strong>is part of the same web site</strong>, then a <strong><em>relative URL</em></strong> can be used. As we have seen in the example above, this is only the name of the file.</span></p> <div style="text-align: justify;"> <span style="font-family: Verdana,sans-serif;"> </span></div> <p style="text-align: justify;"> <span style="font-family: Verdana,sans-serif;">A <em>relative URL</em> is always <em>relative</em> to the current HTML page. If the target file is located in another folder, this must be taken into account. If the image from the example above were in a subfolder called <span style="color: rgb(255, 0, 0);"><code>images</code>,</span> the <em>relative URL</em> would be <span style="color: rgb(255, 0, 0);"><code>images/marco.jpg</code>.</span> If the file is in a parent folder you can reach it with <span style="color: rgb(255, 0, 0);"><code>../</code>.</span> The URL for the image in this case would be <span style="color: rgb(255, 0, 0);"><code>../marco.jpg</code>.</span></span></p> <p style="text-align: justify;"> <span style="font-family: Verdana,sans-serif;"><span style="color: rgb(255, 0, 0);"> </span></span></p> <div style="text-align: justify;"> <span style="font-family: Verdana,sans-serif;"> </span></div> <p style="text-align: justify;"> <span style="font-family: Verdana,sans-serif;">If the file is located <strong>on another website</strong>, an <strong><em>absolut URL</em></strong> must be used. Absolute URLs contain the entire domain name and path. An example would be <span style="color: rgb(255, 0, 0);"><code>http://code.makery.ch/images/marco.jpg</code>.</span></span></p> <p style="text-align: justify;"> <span style="font-family: Verdana,sans-serif;"><span style="color: rgb(255, 0, 0);"> </span></span></p> <p style="text-align: center; clear: both;" class="separator"> <a style="clear: left; margin-bottom: 1em; float: left; margin-right: 1em;" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUPWB6KL46B-P5H2K7dl87SWKgqR_ra2HPn9dZHrQc5wMcXRtMB3A5gbkbwpoler0WO-7P95xxBqQ0eD0gP8tsa-oIxNXJkVM5TLPRUek00DURLHpy6raukr78KKXhmTdrqXcYV8lDMo8W/s1600/note-2.PNG" imageanchor="1"><img data-original-height="160" data-original-width="847" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUPWB6KL46B-P5H2K7dl87SWKgqR_ra2HPn9dZHrQc5wMcXRtMB3A5gbkbwpoler0WO-7P95xxBqQ0eD0gP8tsa-oIxNXJkVM5TLPRUek00DURLHpy6raukr78KKXhmTdrqXcYV8lDMo8W/s1600/note-2.PNG" style="" border="0"></a></p> <p style="text-align: justify;"> <b><span style="font-family: Verdana,sans-serif;"><span style="color: rgb(255, 0, 0);"> </span>Examples of Relative and Absolute URLs</span></b></p> <p style="text-align: justify;"> <b><span style="font-family: Verdana,sans-serif;"> </span></b></p> <p style="text-align: center; clear: both;" class="separator"> <a style="clear: left; margin-bottom: 1em; float: left; margin-right: 1em;" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyNUeI3oUZroDdjvJ0YyQ7ob17iEe5mcYu_NyVjdi3SuI8GUrKXNdxMhcvErfRvy1oz0H3csnPEEbjiJEf1KY2XRJvqhyphenhyphen4WRce1HzF7o5UqGWDlOh80UcuN1Ys0QhYy0JrT2zaGRgCyRnV/s1600/Relative+and+absulute+url.PNG" imageanchor="1"><img data-original-height="184" data-original-width="846" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyNUeI3oUZroDdjvJ0YyQ7ob17iEe5mcYu_NyVjdi3SuI8GUrKXNdxMhcvErfRvy1oz0H3csnPEEbjiJEf1KY2XRJvqhyphenhyphen4WRce1HzF7o5UqGWDlOh80UcuN1Ys0QhYy0JrT2zaGRgCyRnV/s1600/Relative+and+absulute+url.PNG" style="" border="0"></a></p> <p style="text-align: justify;"> <b><span style="font-family: Verdana,sans-serif;"> </span></b></p> <h3 id="portfolio-with-an-image"> <span style="font-family: Verdana,sans-serif;">Portfolio with an Image</span></h3> <span style="font-family: Verdana,sans-serif;"> </span><p> <span style="font-family: Verdana,sans-serif;">If you have not already done so, try and insert an image in your portfolio. You must copy an image to your <em>Portfolio</em> folder on your computer. Make sure that you specify the exact file name, including the file extension.</span></p> <span style="font-family: Verdana,sans-serif;"> </span><p> <span style="font-family: Verdana,sans-serif;">All of your code could now look something like this (I've added a subheading and some more text):</span></p> <span style="font-family: Verdana,sans-serif;"> </span><h5 id="index-html-with-finished-portfolio-code"> <span style="font-family: Verdana,sans-serif;">index.html with Finished Portfolio Code</span></h5> <h5 id="index-html-with-finished-portfolio-code"> <span style="font-family: Verdana,sans-serif;"> </span></h5> <p style="text-align: justify;"> <span style="font-family: Verdana,sans-serif;"> </span></p>
