Sunday, November 12, 2017

Introducing semantic markup in HTML at codelent

Posted on November 12, 2017 by  with 2 comments




Introducing…semantic markup
The purpose of HTML is to add meaning and structure to the content. It is not intended to provide instructions for how the content should look (its presentation).
Your job when marking up content is to choose the HTML element that provides the most meaningful description of the content at hand. In the biz, we call this semantic markup. For example, the most important heading at the beginning of the document should be marked up as an h1 because it is the most important heading on the page. Don’t worry about what that looks like in the browser…you can easily change that with a style sheet. The important thing is that you choose elements based on what makes the most sense for the content.
In addition to adding meaning to content, the markup gives the document structure. The way elements follow each other or nest within one another creates relationships between the elements. You can think of it as an outline (its technical name is the DOM, for Document Object Model). The underlying document hierarchy is important because it gives browsers cues on how to handle the content. It is also the foundation upon which we add presentation instructions with style sheets and behaviors with JavaScript. We’ll talk about document structure more in Part III, when we discuss Cascading Style Sheets, and in Part IV in the JavaScript overview. Although HTML was intended to be used strictly for meaning and structure since its creation, that mission was somewhat thwarted in the early years of the web. With no style sheet system in place, HTML was extended to give authors ways to change the appearance of fonts, colors, and alignment using markup alone. Those presentational extras are still out there, so you may run across them if you view the source of older sites or a site made with old tools.
Defining text elements.
1. Open your text editor, if it isn’t open already.
REMEMBER TO START WITH THIS TYPE OF CODE
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<title>THE TITLE OF YOU DCO</title>
</head> 
Before going into the body aspect <body>
2. The first line of text, “Black Goose Bistro,” is the main heading for the page, so we’ll mark it up as a Heading Level 1 (h1) element. Put the opening tag, <h1>, at the beginning of the line and the closing tag, </h1>, after it, like this:

<h1>Black Goose Bistro</h1>

3. Our page also has three subheads. Mark them up as Heading Level 2 (h2) elements in a similar manner. I’ll do the first one here; you do the same for “Catering” and “Location and Hours”.

<h2>The Restaurant</h2>

4. Each h2 element is followed by a brief paragraph of text, so let’s mark those up as paragraph (p) elements in a similar manner. Here’s the first one; you do the rest.
<p>The Black Goose Bistro offers casual lunch and
dinner fare in a hip atmosphere. The menu changes
regularly to highlight the freshest ingredients.
</p>
5. Finally, in the Catering section, I want to emphasize that visitors should just leave the cooking to us. To make textemphasized, mark it up in an emphasis element (em) element, as shown here.
<p>You have fun... <em>we'll handle the cooking  </em>. Black Goose Catering can handle events
from snacks for bridge club to elegant corporate
fundraisers.</p>
6. Now that we’ve marked up the document, let’s save it as we
did before, and open (or refresh) the page in the browser.
If it doesn’t, check your markup to be sure that you aren’t
missing any angle brackets or a slash in a closing tag.
Give a try with your android phone as well.
Just follow this simple step in other to run the code on android

Android users
For android users open your “ WPS OFFICE “  click on the + button select “new document” choose “blank” now copy and paste your code or type in your code, after that click the save button in the top after the “edit” button. Now select ideal “phone” or “sdcard” , now  type the name of your file and on the right corner tap and select “.txt” click save. Goto your file manager select the storage part you save it to, scroll and look for the file, then rename with “.html” and save.   now tape the file and select a browser to open the file.


Happy coding season........

2 comments:

Subscribe to: Post Comments (Atom)