You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
10 KiB
115 lines
10 KiB
<!doctype html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<title>My Learning Website</title> |
|
<link href="/styles/styles.css" rel="stylesheet" type="text/css"> |
|
<link href="styles/homepagestyles.css" rel="stylesheet"> |
|
<link href="/webdevelopment/styles/styles.css" rel="stylesheet" type="text/css"> |
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> |
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> |
|
<!--[if lt IE 9]> |
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> |
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> |
|
<![endif]--> |
|
</head> |
|
<body> |
|
|
|
<div class="banner"> |
|
<h1 class="courselink">HTML Essential Training</h1> |
|
<h2 class="lecturer">LinkedIn Learning : Jen Simmons</h2> |
|
<h2 class="episodetitle">More Ways to Identify Content</h2> |
|
</div> |
|
|
|
<article> |
|
<h1 class="sectiontitle">Supporting Languages</h1> |
|
<p>Correctly identifying the language our web page is using is important for a number of reasons. It helps search engines to correctly categorise the page and ensures that the right dictionary is used for spell checking. In the simplest scenario, the web page is all written in the same language and we can use the lang attribute with our <HTML> tag. For example</p> |
|
<pre class="inset"><html lang="en-GB"></pre> |
|
<p>This specifies the language as British English. If we want to be a little more generic, we could just specify English.</p> |
|
<pre class="inset"><html lang="en-GB"></pre> |
|
<p>However, it is usually better to be as specific as possible. The lang attribute doesn't just specify the language, but also, for example, the alphabet used.</p> |
|
<p>The lange attribute is universal, so it can be applied to any element. If the page contains content written in several languages, you would want to specify the correct language for each element. This is a bit easier if you have a page that is mostly written in one language. For example, you might have a page written in English which contains a couple of quotes written in, for instance, Greek. The simplest solution would be to apply a lang attribute with a value of "en" or "en-GB" on the outermost HTML element (that is, usually, the <html> element). We can then set the language on the elements containing the quotes and these would typically be <blockquote> elements.</p> |
|
<p>There is also a dir attribute which will have a value of either "ltr" for left to right or "rtl" for right to left and this specifies whether the direction in which the text runs on the page. Like the lang attribute, the dir attribute can be applied to the outermost HTML element if it applies to the whole page and can also be specified for particular elements within the page if required. Note that the default value is "ltr" so you will probably not see this very often.</p> |
|
<p>Another important attribute is charset (character set). It used to be common for this to be specified as ASCII which is okay for text written in English, but it only contains 128 characters so it wouldn't support any languages using non-standard alphabetic characters such as é or â from French. Note that I am using HTML entities to create these characters here (&eacute; or &acirc;). Today, you will most likely see a Unicode character set such as UTF-8 being specified. This was created in order to allow support for multiple alphabets and now supports around 137,000 characters.</p> |
|
<h1 class="sectiontitle">Generic Elements: div and span</h1> |
|
<p>The <div> and <span> are generic elements used to create an element within the HTML that can be targeted by CSS or JavaScript. To give an example, most of the HTML for this page is contained within an <article> element. This allows me to group the content for the main part of the page, that is everything inside the viewport that is specific to this page so not including the menu bar at the top or the title of the course. For example, this particular page contains my notes for the video entitled <em>Generic Elements: div and span</em> and those notes are contained in the <article> element.</p> |
|
<p>I could have used a <div> element instead but unlike the <article> element, the <div> element has no semantic information. It doesn't tell the browser what sort of content this is, just that it is content that has been grouped together for some reason.</p> |
|
<p>The <span> element is similar to the <div> element. The difference is that <div> is a block element, so it would be used to mark a block of HTML, just as the <article> element does. On the other hand, <span> is an inline element so it might be used to mark up some text within a paragraph, for example.</p> |
|
<p>Because <div> and <span> don't convey any semantic information, they are generally not used very much in modern HTML. However, there may be occassions when you want to group some elements together when there is no specific meaning. You might just want to group some elements together for styling purposes. Consider the following block of HTML.</p> |
|
<pre class="inset"> |
|
<article lang="en"> |
|
<h1>This is the headline</h1> |
|
<p>The first paragraph</p> |
|
<p>Some text in a second paragraph.</p> |
|
<p>Third paragraph. Esta oración está en español. Some of this text is in another language.</p> |
|
<p>Fourth paragraph.</p> |
|
</article></pre> |
|
<p>In the browser, this will look like</p> |
|
<pre class="inset"> |
|
<h1>This is the headline</h1> |
|
The first paragraph |
|
Some text in a second paragraph. |
|
Third paragraph. Esta oración está en español. Some of this text is in another language. |
|
Fourth paragraph.</pre> |
|
<p>Let's say that we want to give the paragraphs a different background colour, just to make them stand out. There is no obvious element to use here, so we might consider using a <div> element. Our code will now look like this</p> |
|
<pre class="inset"> |
|
<article lang="en"> |
|
<h1>This is the headline</h1> |
|
<div> |
|
<p>The first paragraph</p> |
|
<p>Some text in a second paragraph.</p> |
|
<p>Third paragraph. Esta oración está en español. Some of this text is in another language.</p> |
|
<p>Fourth paragraph.</p> |
|
</div> |
|
</article></pre> |
|
<p>This is what our HTML now looks like in the browser</p> |
|
<pre class="inset"> |
|
<h1>This is the headline</h1> |
|
The first paragraph |
|
Some text in a second paragraph. |
|
Third paragraph. Esta oración está en español. Some of this text is in another language. |
|
Fourth paragraph.</pre> |
|
<p>I should point out that the actual HTML I have used for this is slightly different because it is inside an <article> element already so I changed the tags a little bit to make it work whilst enclosing the paragraphs in a <div> element with a class of "divsample to allow it to be styled."</p> |
|
<p>So, that's how we can use the <div> element to group content when we are just doing this because it is convenient and not because there is any particular meaning associated with that content that we need to convey.</p> |
|
<p>Within this sample HTML, we have a bit of text in Spanish, so let's say that we want to mark this with an appropriate lang attribute. This is inside a <p> element, but the paragraph is a mixture of English and Spanish and we only want to apply this lang attribute to the Spanish sentence. As things stand, we can't do that so we need to wrap the Spanish text in an appropriate element. Again, this is just for convenience so we don't need to convey any semantic information with this element and since it is inline, a <span> element would be suitable. The amended HTML looks like this</p> |
|
<pre class="inset"> |
|
<article lang="en"> |
|
<h1>This is the headline</h1> |
|
<div> |
|
<p>The first paragraph</p> |
|
<p>Some text in a second paragraph.</p> |
|
<p>Third paragraph. &span lang="es">Esta oración está en español. Some of this text is in another language.</p> |
|
<p>Fourth paragraph.</p> |
|
</div> |
|
</article></pre> |
|
<p>In the browser, this gives us</p> |
|
<pre class="inset"> |
|
<h1>This is the headline</h1> |
|
The first paragraph |
|
Some text in a second paragraph. |
|
Third paragraph. <span lang="es">Esta oración está en español.</span> Some of this text is in another language. |
|
Fourth paragraph.</pre> |
|
<p>As a matter of interest, I actually replaced the <article> element with a <div> element which means I have one <div> element nested inside another. It is normally not a good idea to nest elements like this since this can confuse the browser - where does the first <div> element end for example, but it seems to work reasonably well. It is important to note that this is a hack to make the code work so not ideal but good enough for the purpose of demonstrating the point in hand.</p> |
|
<p>We might sum up by saying that the <div> and <span> elements can be useful for grouping or targetting content, but because they don't convey any semantic information, they should only be used when there is no other more appropriate element that can be used so really, you should think of them as a last resort.</p> |
|
</article> |
|
<div class="btngroup"> |
|
<button class="button" onclick="window.location.href='media.html';"> |
|
Previous Chapter - Media |
|
</button> |
|
<button class="button" onclick="window.location.href='together.html';"> |
|
Next Chapter - Putting it All Together |
|
</button> |
|
<button class="button" onclick="window.location.href='htmlessentialtraining.html'"> |
|
Course Contents |
|
</button> |
|
<button class="button" onclick="window.location.href='/webdevelopment/webdevelopment.html'"> |
|
Web Development Page |
|
</button> |
|
<button class="button" onclick="window.location.href='/index.html'"> |
|
Home |
|
</button> |
|
</div> |
|
</body> |
|
</html> |