دانستن HTML
در این درس 2
HTML
ابهام معناشناسی
تقسیمات و فاصله ها
عناصر مبتنی بر متن
اسکلت ساختمان
ایجاد لینک ها
دانش آموزان و معلمان، تا 60٪ در Adobe Creative Cloud ذخیره کنید.
تبلیغات از طریق کربن
با معرفی ما به HTML و css کامل، وقت آن است که کمی به عمق HTML بپردازیم و اجزای مختلفی را که این زبان را تشکیل می دهند، بررسی کنیم.
برای شروع ساختن وبسایت ها، ما باید کمی در مورد اینکه کدام عناصر HTML برای نمایش انواع مختلف محتوا مورد استفاده قرار گیرد، کمی بیشتر یاد بگیریم. همچنین مهم است که بدانیم چگونه عناصر بصری در یک صفحه وب نمایش داده می شوند، و همچنین اینکه چه عناصر متفاوتی به معنای معنایی دارند.
استفاده از عنصر مناسب برای این کار طولانی است و ما می خواهیم تصمیمات آگاهانه را در این فرآیند بگیریم.
ابهام معناشناسی
پس دقیقا معناشناسی چیست؟ معناشناسی درون HTML ، تمرکز دادن محتوا به معنای صفحه و ساختار با استفاده از عنصر مناسب است. کد معنایی ارزش محتوای یک صفحه را بدون توجه به سبک یا ظاهر آن محتوا توضیح می دهد. مزایای متعددی برای استفاده از عناصر معنایی، از جمله فعال کردن کامپیوترها، خوانندگان صفحه نمایش، موتورهای جستجو و دیگر دستگاه ها برای به حد کافی خواندن و درک مطالب در یک صفحه وب وجود دارد. علاوه بر این، HTML معنایی آسانتر از مدیریت و کار با آن است، زیرا به وضوح نشان میدهد که چه چیزی در مورد هر یک از محتویات است.
حرکت به جلو به عنوان عناصر جدید معرفی شده است، ما در مورد آنچه که این عناصر در واقع به معنی و نوع محتوای آنها را نشان می دهند صحبت می کنند. پیش از آنکه ما این کار را انجام دهیم، نگاهی به دو عنصر- <div>s و <span>s می دهیم که در واقع هیچ معنایی معنایی ندارند. آنها فقط برای اهداف یک ظاهر طراحی شده وجود دارند.
شناسایی بخش ها و فواصل
بخش ها یا <div>S و <span>S عناصر HTML هستند که به صورت ظروف صرفا برای اهداف یک ظاهر طراحی می شوند. به عنوان ظروف عمومی، آنها به هیچ معنی و معنایی عمیق نمی رسند. پاراگراف ها معنایی هستند در آن محتوا که درون یک <p>عنصر پیچیده شده است به عنوان پاراگراف شناخته شده و قابل درک است. <div>S و <span>S هیچ معنی خاصی ندارند و فقط ظروف هستند.
بلوک در مقابل عناصر درون خطی
اکثر عناصر هم عناصر سطح بلوک یا inline هستند. تفاوت در چیست؟
عناصر سطح بلوک در یک خط جدید شروع می شوند، انباشته شدن یکی در بالای دیگری، و هر گونه عرض در دسترس را اشغال می کند. عناصر بلوک سطح ممکن است در داخل یکدیگر قرار بگیرند و ممکن است عناصر سطحی درون سطح را ببندند. ما اغلب عناصر سطح بلوک را برای قطعات بزرگتر محتوا مانند پاراگراف ها می بینیم.
عناصر سطح درون خطی در خط جدید شروع نمی شوند. آنها به جریان عادی سند میپیوندند، یکی پس از دیگری به یکدیگر میچسبند و تنها محتوای محتوا را حفظ میکنند. عناصر سطح درون خطی ممکن است در داخل یکدیگر قرار گیرند؛ با این حال، آنها نمی توانند عناصر بلوک سطح را ببندند. معمولا عناصر درون خطی با مقادیر کوچکتر از جمله چند کلمه نمایش می بینیم.
با این حال، هر دو <div>S و <span>S هنگام طراحی وب سایت بسیار ارزشمند هستند و به ما امکان می دهند که سبک های هدفمند را به یک مجموعه حاوی محتوا اضافه کنیم.
A <div>یک عنصر سطح بلوک است که معمولا برای شناسایی گروه بندی های بزرگ محتوا استفاده می شود و به ساختن طرح بندی و طراحی وب کمک می کند. <span>، از سوی دیگر، یک عنصر در سطح درون خطی برای شناسایی گروه بندی های کوچکتر از متن در داخل یک عنصر سطح بلوک استفاده می شود.
ما به طور کلی <div>S و <span>S با classیا idویژگی های برای اهداف یک ظاهر طراحی شده را مشاهده می کنیم. انتخاب یک classیا idمقدار ویژگی یا نام، نیاز به کمی مراقبت دارد. ما می خواهیم یک مقدار را انتخاب کنیم که به محتوای یک عنصر اشاره دارد، لزوما ظاهر یک عنصر نیست.
به عنوان مثال، اگر <div>یک پس زمینه نارنجی داشته باشیم که حاوی پیوندهای رسانه های اجتماعی باشد، اولین فکر ما ممکن است <div>یک classارزش را به ارمغان بیاورد orange. چه اتفاقی می افتد اگر پس زمینه نارنجی به آبی تبدیل شود؟ داشتن classارزش orangeدیگر معنی ندارد انتخاب محسوس تر برای یک classارزش social، همانطور که مربوط به محتویات <div>، نه سبک است.
1
2
3
4
5
6
7
8
9
<!-- Division -->
<div class="social">
<p>I may be found on...</p>
<p>Additionally, I have a profile on...</p>
</div>
<!-- Span -->
<p>Soon we'll be <span class="tooltip">writing HTML</span> with the best of them.</p>
نظرات درون HTML و CSS
کد قبلی شامل علامت تعجب در داخل HTML است، و این همه درست است. این ها عناصر نیستند، اینها نظرات هستند.
HTML و CSS به ما این امکان را می دهند که نظر خود را در کد ما قرار دهیم، و هر محتوایی که در یک نظر پیچیده شده است در صفحه وب نمایش داده نخواهد شد. نظرات کمک می کند فایل های خود را سازماندهی کند، به ما اجازه می دهد تا یادآوری ها را تنظیم کنیم و راه را برای ما به طور موثر مدیریت کد ما فراهم کنیم. نظرات هنگامی که چندین نفر در یک پرونده کار می کنند، بسیار مفید هستند.
نظرات HTML با شروع شروع می شود <!-- and end with -->. نظرات CSS شروع /*و پایان می یابد */.
با استفاده از عناصر مبتنی بر متن
بسیاری از انواع مختلف رسانه و محتوای آنلاین وجود دارد. با این حال، متن غالب است. بر این اساس، تعدادی از عناصر مختلف برای نمایش متن در یک صفحه وب وجود دارد. در حال حاضر ما بر عناصر محبوب تر، از جمله عنوان ها، پاراگراف ها، متن های جسورانه برای نشان دادن اهمیت و تمرکز کافی برای تمرکز تمرکز می کنیم. بعدها، در درس 6، " کار با تایپوگرافی "، نگاهی دقیق تر به نحوه نوشتن متن خواهیم داشت.
عنوان ها
عنوان ها عناصر بلوک سطح هستند و در شش رتبه بندی متفاوت <h1>از طریق آنها آمده است <h6>. سرفصلها به شما کمک می کنند تا محتویات خود را به سرعت تجزیه و ایجاد سلسله مراتب کنید، و آنها شناسایی کلیدی برای کاربران خواندن یک صفحه است. آنها همچنین به موتورهای جستجو کمک می کنند تا محتویات یک صفحه را فهرست و تعیین کنند.
عنوان ها باید به ترتیب مربوط به محتوای یک صفحه استفاده شود. عنوان اصلی یک صفحه و یا بخش باید با یک مشخص شده اند <h1>عنصر، و سرفصل های بعدی باید استفاده کنید <h2>، <h3>، <h4>، <h5>، و <h6>عناصر در صورت لزوم.
هر سطح عنوان باید مورد استفاده قرار گیرد که در آن معناشناختی ارزشمند باشد و نباید برای ساختن متن به اندازه کافی بزرگ یا بزرگ استفاده شود، راه دیگری برای این کار وجود دارد.
در اینجا یک مثال از HTML برای تمام سطوح مختلف عنوان و صفحه نمایش در صفحه وب است.
1
2
3
4
5
6
7
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
پاراگرافها
عنوان ها اغلب با حمایت از پاراگراف ها دنبال می شوند. پاراگراف ها با استفاده از <p>عنصر سطح بلوک تعریف می شوند . پاراگرافها می توانند یکی پس از دیگری ظاهر شوند، و اطلاعات را به یک صفحه به صورت دلخواه اضافه می کنند. در اینجا یک مثال از نحوه تنظیم پاراگرافها است.
1
2
3
4
<p>Steve Jobs was a co-founder and longtime chief executive officer at Apple. On June 12, 2005, Steve gave the commencement address at Stanford University.</p>
<p>In his address Steve urged graduates to follow their dreams and, despite any setbacks, to never give up–advice which he sincerely took to heart.</p>
پاراگراف نسخه ی نمایشی
متن پررنگ با قوی
برای اینکه متن را به صورت جسورانه قرار دهیم و بر آن اهمیتی قائل شویم، از <strong>عنصر درون خطی استفاده خواهیم کرد. دو عنصر برای متن وجود دارد که برای ما به کار می رود: عناصر <strong>و <b>عناصر. مهم است که تفاوت معنایی بین این دو را درک کنید.
این <strong>عنصر به لحاظ معنایی مورد استفاده قرار می گیرد تا اهمیت زیادی برای متن داشته باشد و بنابراین محبوب ترین گزینه برای نوشتن متن است. <b>عنصر، از سوی دیگر، معنایی به معنای سبک جبران متن، که همیشه بهترین انتخاب برای متن مستحق توجه برجسته است. ما باید اهمیت متن را که می خواهیم به عنوان جسورانه تعیین کنیم، انتخاب کنیم و بر اساس آن یک عنصر را انتخاب کنیم.
در اینجا دو گزینه HTML برای ایجاد متن جسورانه در عمل وجود دارد:
1
2
3
4
5
6
<!-- Strong importance -->
<p><strong>Caution:</strong> Falling rocks.</p>
<!-- Stylistically offset -->
<p>This recipe calls for <b>bacon</b> and <b>baconnaise</b>.</p>
متن ضخیم با نسخه ی نمایشی قوی
متن را با تاکید متناسب کنید
برای جالب بودن متن، در نتیجه تاکید بر آن، از <em>عنصر درون خطی استفاده می کنیم . همانطور که با عناصر برای متن جسور، دو عنصر مختلف وجود دارد که متن را کالیج می کنند، هر کدام با معنای معنایی کمی متفاوت دارند.
این <em>عنصر به صورت مفهومی به منظور تأکید بر تأکید بر متن استفاده می شود؛ بدین ترتیب محبوب ترین گزینه برای کج کردن متن است. گزینه دیگر، <i>عنصر، به معنای معنایی استفاده می شود تا متن را در صدای متن یا صدای دیگری جایگزین کند ، تقریبا همانند آن در علامت نقل قول قرار می گیرد. مجددا باید اهمیت متن را که میخواهیم کلاسیک کنیم، ارزیابی کنیم و بر اساس آن یک عنصر را انتخاب کنیم.
در اینجا کد HTML برای علامت گذاری است:
1
2
3
4
5
6
<!-- Stressed emphasis -->
<p>I <em>love</em> Chicago!</p>
<!-- Alternative voice or tone -->
<p>The name <i>Shay</i> means a gift.</p>
Italicize متن با Emotional Demo
این عناصر سطح متن بسیار مفید هستند برای آوردن محتوای ما به زندگی. علاوه بر این، عناصر ساختاری وجود دارد. عناصر مبتنی بر متن، دسته بندی ها و پاراگراف ها را شناسایی می کنند، عناصر ساختاری گروه بندی محتوا مانند هدر ها، مقالات، پاورقی ها و غیره را شناسایی می کنند. بیا یک نگاهی بیندازیم.
اسکلت ساختمان
برای طولانی ترین زمان ساختار یک صفحه وب با استفاده از تقسیم بندی ها ساخته شد. مشکل این بود که تقسیمات ارزش معنایی ندارند و تعیین قصد این تقسیم ها بسیار دشوار بود. خوشبختانه HTML5 معرفی جدید عناصر بر اساس ساختاری ، از جمله <header>، <nav>، <article>، <section>، <aside>، و <footer>عناصر.
همه این عناصر جدید در نظر گرفته شده است تا به معنای سازماندهی صفحات ما و بهبود معانی ساختاری ما باشد. آنها همه عناصر سطح بلوک هستند و هیچ موقعیت یا سبک دلخواه ندارند. علاوه بر این، تمام این عناصر را می توان چندین بار در هر صفحه استفاده کرد، تا زمانی که هر استفاده نشان دهنده معنای معنایی مناسب باشد.
بگذارید آستین هایمان را بالا بیاوریم و نگاهی دقیق تر به آن ها ببریم.
اسکلت ساختمان
شکل 2
یک مثال ممکن از عناصر ساختاری HTML5 به معنای سازماندهی صفحات ما است
سرتیتر
<header>عنصر، مانند آن برای تلفن های موبایل، استفاده می شود برای شناسایی بالای صفحه، مقاله، بخش، و یا بخش دیگر از یک صفحه. به طور کلی، <header>عنصر ممکن است شامل عنوان، مقدمه ای و حتی ناوبری باشد.
1
2
<header>...</header>
<header>در مقابل <head>در مقابل <h1>از طریق <h6>عناصر
<header>عنصر را با <head>عنصر یا عناصر عنوان، <h1>از طریق آسان می توانید عنصر را اشتباه بگیرید <h6>. آنها همه معانی معنایی مختلف دارند و باید با توجه به معانی آنها استفاده شوند. برای مرجع ...
<header>عنصر یک عنصر ساختاری که به تشریح عنوان بخشی از یک صفحه است. این درون <body>عنصر می افتد .
<head>عنصر در یک صفحه نمایش داده نمی شود و استفاده شده است به طرح ابرداده، از جمله عنوان سند، و لینک به فایل خارجی. این مستقیما درون <html>عنصر قرار دارد.
عناصر سرفصل <h1>از طریق <h6>، برای تعیین سطوح مختلف متن عنوان در یک صفحه استفاده می شوند.
جهت یابی
<nav>عنصر شناسایی بخش از لینک اصلی ناوبری در یک صفحه. <nav>عنصر باید برای بخش ناوبری اولیه تنها، مانند ناوبری جهانی، یک جدول از محتویات، لینک قبلی / بعدی، و یا دیگر گروه های قابل توجه از پیوندهای ناوبری محفوظ می باشد.
به طور معمول، لینک های موجود در <nav>عنصر به صفحات دیگر در همان وب سایت یا قسمت هایی از یک صفحه وب لینک می شوند. پیوندهای متفرقه متفرقه در <nav>عنصر نباید پیچیده شود؛ آنها باید از عنصر لنگر <a>، و عنصر لنگر به تنهایی استفاده کنند.
1
2
<nav>...</nav>
مقاله
<article>عنصر برای تعریف یک بخش مستقل، محتوای خود شامل است که ممکن است به طور مستقل توزیع و یا استفاده مجدد قرار. ما اغلب از <article>عنصر برای نشانه گذاری پست های وبلاگ، مقالات روزنامه ها، مطالب ارائه شده توسط کاربر و ... استفاده می کنیم.
هنگام تصمیم گیری برای استفاده از <article>عنصر، باید تعیین کنیم که محتوای داخل عنصر بدون هیچ گونه سردرگمی در جای دیگر قابل تکرار باشد. اگر محتوا در <article>عنصر از چارچوب صفحه برداشته شده و به عنوان مثال در یک ایمیل یا چاپ چاپ شده باشد، این محتوا هنوز هم باید منطقی باشد.
1
2
<article>...</article>
بخش
The <section> element is used to identify a thematic grouping of content, which generally, but not always, includes a heading. The grouping of content within the <section> element may be generic in nature, but it’s useful to identify all of the content as related.
The <section> element is commonly used to break up and provide hierarchy to a page.
1
2
<section>...</section>
Deciding Between <article>, <section>, or <div> Elements
At times it becomes fairly difficult to decide which element—<article>, <section>, or <div>—is the best element for the job based on its semantic meaning. The trick here, as with every semantic decision, is to look at the content.
Both the <article> and <section> elements contribute to a document’s structure and help to outline a document. If the content is being grouped solely for styling purposes and doesn’t provide value to the outline of a document, use the <div> element.
If the content adds to the document outline and it can be independently redistributed or syndicated, use the <article> element.
If the content adds to the document outline and represents a thematic group of content, use the <section> element.
Aside
The <aside> element holds content, such as sidebars, inserts, or brief explanations, that is tangentially related to the content surrounding it. When used within an <article> element, for example, the <aside> element may identify content related to the author of the article.
We may instinctively think of an <aside> element as an element that appears off to the left or right side of a page. We have to remember, though, that all of the structural elements, including the <aside> element, are block-level elements and as such will appear on a new line, occupying the full available width of the page or of the element they are nested within, also known as their parent element.
1
2
<aside>...</aside>
We’ll discuss how to change the position of an element, perhaps placing it to the right or left of a group of content, in Lesson 5, “Positioning Content.”
Footer
The <footer> element identifies the closing or end of a page, article, section, or other segment of a page. Generally the <footer> element is found at the bottom of its parent. Content within the <footer> element should be relative information and should not diverge from the document or section it is included within.
1
2
<footer>...</footer>
With structural elements and text-based elements under our belts, our HTML knowledge is really starting to come together. Now is a good time to revisit our Styles Conference website and see if we can provide it with a little better structure.
In Practice
Currently, our Styles Conference website lacks real structure—and content for that matter. Let’s take some time to flesh out our home page a bit.
Using our existing index.html file, let’s add in a <header> element. Our <header> element should include our existing <h1> element; let’s also add an <h3> element as a tagline to support our <h1> element.
1
2
3
4
5
<header>
<h1>Styles Conference</h1>
<h3>August 24–26th — Chicago, IL</h3>
</header>
After our <header> element, let’s add a new group of content, using the <section> element, that introduces our conference. We’ll begin this section with a new <h2> element and end it with our existing paragraph.
1
2
3
4
5
<section>
<h2>Dedicated to the Craft of Building Websites</h2>
<p>Every year the brightest web designers and front-end developers descend on Chicago to discuss the latest technologies. Join us this August!</p>
</section>
Following the introduction to our conference, let’s add another group of content that teases a few of the pages we’ll be adding, specifically the Speakers, Schedule, and Venue pages. Each of the pages we’re teasing should also reside within its own section and include supporting text.
We’ll group all of the teasers inside a <section> element, and each individual teaser will be wrapped within a <section> element as well. In all, we’ll have three <section> elements inside another <section> element, which is all right.
1
2
3
4
5
6
7
8
9
10
11
12
<section>
<section>
<h5>Speakers</h5>
<h3>World-Class Speakers</h3>
<p>Joining us from all around the world are over twenty fantastic speakers, here to share their stories.</p>
</section>
...
</section>
Lastly, let’s add our copyright within the <footer> element at the end of our page. To do so let’s use the <small> element, which semantically represents side comments and small print—perfect for our copyright.
Generally, content within the <small> element will be rendered as, well, small, but our CSS reset will prevent that from happening.
1
2
3
4
<footer>
<small>© Styles Conference</small>
</footer>
Now we can see our home page beginning to come to life.
وب سایت کنفرانس سبک
Fig 2
Our home page after adding more content and structure
Encoding Special Characters
The <h3> element within our <header> element, as well as the <small> element within our <footer> element, has some interesting things going on. Specifically, a few special characters within these elements are being encoded.
Special characters include various punctuation marks, accented letters, and symbols. When typed directly into HTML, they can be misunderstood or mistaken for the wrong character; thus they need to be encoded.
Each encoded character will begin with an ampersand, &, and end with a semicolon, ;. What falls between the ampersand and semicolon is a character’s unique encoding, be it a name or numeric encoding.
For example, we would encode the word “resumé” as resumé. Within our header we have encoded both en and em dashes, and within our footer we have encoded the copyright symbol. For reference, a long list of character encodings may be found at Copy Paste Character.
With our home page taking shape, let’s take a look at creating hyperlinks so that we may add additional pages and build out the rest of our website.
Creating Hyperlinks
Along with text, one of the core components of the Internet is the hyperlink, which provides the ability to link from one web page or resource to another. Hyperlinks are established using the anchor, <a>, inline-level element. In order to create a link from one page (or resource) to another, the href attribute, known as a hyperlink reference, is required. The href attribute value identifies the destination of the link.
For example, clicking the text “Shay,” which is wrapped inside the anchor element with the href attribute value of http://shayhowe.com, will take users to my website.
1
2
<a href="http://shayhowe.com">Shay</a>
Creating Hyperlinks Demo
Wrapping Block-Level Elements with Anchors
By nature the anchor element, <a>, is an inline element, and, according to web standards, inline-level elements may not wrap block-level elements. With the introduction of HTML5, however, anchor elements specifically have permission to wrap either block-, inline-, or any other level elements. This is a break from the standard convention, but it’s permissible in order to enable entire blocks of content on a page to become links.
Relative & Absolute Paths
The two most common types of links are links to other pages of the same website and links to other websites. These links are identified by their href attribute values, also known as their paths.
Links pointing to other pages of the same website will have a relative path, which does not include the domain (.com, .org, .edu, etc.) in the href attribute value. Because the link is pointing to another page on the same website, the href attribute value needs to include only the filename of the page being linked to: about.html, for example.
Should the page being linked to reside within a different directory, or folder, the href attribute value needs to reflect this as well. Say the about.html page resides within the pages directory; the relative path would then be pages/about.html.
Linking to other websites outside of the current one requires an absolute path, where the href attribute value must include the full domain. A link to Google would need the href attribute value of http://google.com, starting with http and including the domain, .com in this case.
Here clicking on the text “About” will open the about.html page inside our browser. Clicking the text “Google,” on the other hand, will open http://google.com/ within our browser.
1
2
3
4
5
6
<!-- Relative Path -->
<a href="about.html">About</a>
<!-- Absolute Path -->
<a href="http://www.google.com/">Google</a>
Linking to an Email Address
Occasionally we may want to create a hyperlink to our email address—for example, hyperlink text that says “Email Me,” which when clicked opens a user’s default email client and pre-populates part of an email. At a minimum the email address to which the email is being sent is populated; other information such as a subject line and body text may also be included.
To create an email link, the href attribute value needs to start with mailto: followed by the email address to which the email should be sent. To create an email link to shay@awesome.com, for example, the href attribute value would be mailto:shay@awesome.com.
Additionally, subject, body text, and other information for the email may be populated. To add a subject line, we’ll include the subject= parameter after the email address. The first parameter following the email address must begin with a question mark, ?, to bind it to the hyperlink path. Multiple words within a subject line require that spaces be encoded using %20.
Adding body text works in the same way as adding the subject, this time using the body= parameter in the href attribute value. Because we are binding one parameter to another we need to use the ampersand, &, to separate the two. As with the subject, spaces must be encoded using %20, and line breaks must be encoded using %0A.
Altogether, a link to shay@awesome.com with the subject of “Reaching Out” and body text of “How are you” would require an href attribute value of mailto:shay@awesome.com?subject=Reaching%20Out&body=How%20are%20you.
Here’s the full breakdown:
1
2
<a href="mailto:shay@awesome.com?subject=Reaching%20Out&body=How%20are%20you">Email Me</a>
Opening Links in a New Window
One feature available with hyperlinks is the ability to determine where a link opens when clicked. Typically, links open in the same window from which they are clicked; however, links may also be opened in new windows.
To trigger the action of opening a link in a new window, use the target attribute with a value of _blank. The target attribute determines exactly where the link will be displayed, and the _blank value specifies a new window.
To open http://shayhowe.com/ in a new window, the code would look like this:
1
2
<a href="http://shayhowe.com/" target="_blank">Shay Howe</a>
Linking to Parts of the Same Page
Periodically we’ll see hyperlinks that link to part of the same page the link appears on. A common example of these same-page links are “Back to top” links that return a user to the top of a page.
We can create an on-page link by first setting an id attribute on the element we wish to link to, then using the value of that id attribute within an anchor element’s href attribute.
Using the “Back to top” link as an example, we can place an id attribute value of top on the <body> element. Now we can create an anchor element with an href attribute value of #top, pound sign and all, to link to the beginning of the <body> element.
Our code for this same-page link would look like the following:
1
2
3
4
5
6
<body id="top">
...
<a href="#top">Back to top</a>
...
</body>
Hyperlinks are incredibly useful and have revolutionized how we use the Internet. So far we’ve covered how to link to other pages or websites, as well as how to create email links and links to parts of the same page. Before we go any further, let’s create some links of our own.
In Practice
It’s time to take Styles Conference from a single-page website to a full-blown website with multiple pages, all of which will be linked together using hyperlinks.
We’ll begin by making our “Styles Conference” text inside the <h1> element within our <header> element link to the index.html page.
Because we are already on the index.html page, this may seem a little odd—and rightfully so—but as the header is replicated on other pages, linking back to the home page will make sense.
1
2
3
4
<h1>
<a href="index.html">Styles Conference</a>
</h1>
In order to navigate across all of the different pages, we’re going add in a navigation menu, using the <nav> element, within our <header> element. We’ll be creating Speakers, Schedule, Venue, and Register pages to go with our home page, so we should create links for all of them.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<header>
...
<nav>
<a href="index.html">Home</a>
<a href="speakers.html">Speakers</a>
<a href="schedule.html">Schedule</a>
<a href="venue.html">Venue</a>
<a href="register.html">Register</a>
</nav>
</header>
Let’s also add the same navigation menu from our <header> element to our <footer> element for convenience.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<footer>
...
<nav>
<a href="index.html">Home</a>
<a href="speakers.html">Speakers</a>
<a href="schedule.html">Schedule</a>
<a href="venue.html">Venue</a>
<a href="register.html">Register</a>
</nav>
</footer>
Within the <section> element that introduces our conference, just below our header, we should also include a link to register for the conference. Placing a link below the paragraph will work perfectly.
1
2
3
4
5
6
7
8
<section>
...
<a href="register.html">Register Now</a>
</section>
We can’t forget to add links to all of the sections teasing our other pages. Inside each section, let’s wrap both the <h3> and <h5> elements within an anchor element linking to the proper page.
We’ll want to make sure we do this for every section accordingly.
section>
<section>
<a href="speakers.html">
<h5>Speakers</h5>
<h3>World-Class Speakers</h3>
</a>
<p>Joining us from all around the world are over twenty fantastic speakers, here to share their stories.</p>
</section>
...
</section>
Now we need to create a handful of new pages. Let’s create speakers.html, schedule.html, venue.html, and register.html files. These files should live within the same folder as the index.html file, and, because we’re keeping them inside the same folder, all of our links should work as expected.
To ensure that all of our pages look the same, let’s make sure that all of these new files have the same document structure and <header> and <footer> elements as the index.html file.
It’s official, we’re no longer working with a single page but indeed a full website.
وب سایت کنفرانس سبک
Fig 2
Our home page after all of the different links and navigation have been added
Demo & Source Code
در زیر شما می توانید وب سایت کنفرانس سبک ها را در حالت فعلی خود مشاهده کنید و همچنین کد منبع وب سایت را در حالت فعلی خود دانلود کنید.
مشاهده وبسایت کنفرانس سبک ها یا دانلود کد منبع (فایل زیپ)
خلاصه
Semantics، همانطور که در این درس بحث شده، برای ارائه HTML ما با ساختار و معنی ضروری است. حرکت به جلو ما به طور دوره ای عناصر جدید را معرفی می کنیم، که همه آنها معنای معناشناختی خود را به دست می آورند. این معنای تمام این عناصر است که محتوای ما را با بیشترین ارزش ارائه می دهد.
بار دیگر، در این درس ما موارد زیر را پوشش دادیم:
چه معناشناسی و چرا آنها مهم هستند
<div>s و <spans>s، و تفاوت بین عناصر سطح بلوک و inline
کدام یک از عناصر مبتنی بر متن بهترین محتوای یک صفحه را نشان می دهد
عناصر ساختاری HTML5 و نحوه تعریف ساختار و سازماندهی محتوای و صفحه ما
نحوه استفاده از لینک ها برای حرکت بین صفحات وب یا وب سایت ها
امیدوارم شروع به احساس خوب در مورد HTML کنید. هنوز هم کمی برای یادگیری وجود دارد، اما پایه و اساس وجود دارد. بعدا، نگاهی عمیق تر به CSS خواهیم گرفت.