Inside the <body> element of our web site we will use our "Layout Picture" and create:
A navigation barA slide showA headerSome sections and articlesA footer
Semantic Elements
HTML5 introduced several new semantic elements. Semantic elements are important to use because they define the structure of web pages and helps screen readers and search engines to read the page correctly.
These are some of the most common semantic HTML elements:
The [b]<section>[/b] element can be used to define a part of a website with related content. The [b]<article>[/b] element can be used to defines an individual piece of content. The [b]<header>[/b] element can be used to define a header (in a document, a section, or an article). The [b]<footer>[/b] element can be used to define a footer (in a document, a section, or an article).
The [b]<nav>[/b] element can be used to define a container of navigation links.
In this tutorial we will use semantic elements.
However, it is up to you if you want to use <div> elements instead.
The Navigation Bar
On our "Layout Draft" we have a "Navigation bar".
For the navigation bar we can use an unordered list of links:
<!-- Navigation --> <nav>
<ul class="w3-navbar w3-black">
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Band</a></li>
<li><a href="javascript:void(0)">Tour</a></li>
<li><a href="javascript:void(0)">Contact</a></li>
</ul>
</nav>
We can use a [b]<nav>[/b] or <div> element as a container for the navigation links.
The [b]w3-navbar[/b] class styles the navigation links.
The [b]w3-black[/b] class defines the color of the navigation bar.
[b]javascript:void(0) [/b]prevents the links from linking (since the project is under development).
Slide Show
On the "Layout Draft" we have a "Slide show".
For the slide show we can use a [b]<section>[/b] or <div> element as a picture container:
We have created a fictional band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</section>
The [b]w3-justify[/b] class justifies the text's right and left margins.
Then create a [b]<section>[/b] or <div> with an [b]<article>[/b] or <div> about each band-member:
اسمع أخي الموضوع عبارة عن توجيهات للمبرمجين من أجل موقع أفضل لكن بالإنجليزية فحبذت لو وضعت الرابط ليظهر أفضل لأن نقله بنفس تنسيقه يتطلب وقت طويل وشكرًا لك
