在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:learn-co-students/html5-semantic-containers-code-along-v-000开源软件地址:https://github.com/learn-co-students/html5-semantic-containers-code-along-v-000开源编程语言:HTML 100.0%开源软件介绍:HTML5 Semantic Containers Code-alongObjectives
IntroductionBuilding upon previous code alongs, in this exercise you will add HTML5
Semantic Elements by coding along with the video provided, reviewing the
concepts you were introduced to in the previous lessons. All the files you need
to follow along are provided, but if you would like to continue working from
your personal
Instructions
Semantic ElementsTo get started create a feature branch in Terminal by typing HeaderStart by surrounding your <header>
<h1>Exceptional</h1>
<h2>Realty Group</h2>
<a href="index.html">About</a> <a href="new-properties.html">New Properties</a> <a href="real-estate-listings.html">Listings</a> <a href="market-report.html">Market Report</a> <a href="contact.html">Contact</a> <a href="http://hud.gov" target="_blank">H.U.D.</a>
</header> On line 2 the NavNext let's wrap our links in the <header>
<h1>Exceptional</h1>
<h2>Realty Group</h2>
<nav>
<a href="index.html">About</a> <a href="new-properties.html">New Properties</a> <a href="real-estate-listings.html">Listings</a> <a href="market-report.html">Market Report</a> <a href="contact.html">Contact</a> <a href="http://hud.gov" target="_blank">H.U.D.</a>
</nav>
</header> On line 5 our SectionNext we will section off our page by adding a <section id="featured-property">
<img src="images/intro-pic.jpg" alt="A beautiful living room." title="Welcome to Exceptional Realty Group">
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
</section> Note that we gave our section an id of Continuing on we will insert the next section with an id of ...
<section id="promotional">
<video controls>
<source src="videos/real-estate.mp4" type="video/mp4">
<source src="videos/real-estate.ogv" type="video/ogg">
Your browser does not support HTML5 video. <a href="http://browsehappy.com" target="_blank">Please upgrade your browser</a>.
</video>
</section> FooterAt the bottom of the page before the closing ...
<footer>
© 2014 Exceptional Realty Group. All Rights Reserved.
</footer>
</body> On line 3 we used Figure and FigcaptionNext we can surround our image and media content with <section id="featured-property">
<figure>
<img src="images/intro-pic.jpg" alt="A beautiful living room." title="Welcome to Exceptional Realty Group">
<figcaption>345 Carl Street Apt 12, Carrol Rd. Brooklyn, NY - photo by Denise Richards</figcaption>
</figure>
</section> On line 2 we included our Now add another surrounding our video player. <section id="promotional">
<figure>
<video controls>
<source src="videos/real-estate.mp4" type="video/mp4">
<source src="videos/real-estate.ogv" type="video/ogg">
Your browser does not support HTML5 video. <a href="http://browsehappy.com" target="_blank">Please upgrade your browser</a>.
</video>
<figcaption>Exceptional Realty Group Promotional Video - Source: archive.org</figcaption>
</figure>
</section> Don't forget to indent the content such as the video and image that are nested
inside of our Normally you would add these HTML5 semantic elements where applicable to all of your site pages. I will add these to the other pages for you and the next code along will already have them present in its starter code. We just did it on the index page for some practice. Nice work! It's now time to version our changes using Git. To do so, in Terminal type
View HTML5 Semantic Containers Code-along on Learn.co and start learning to code for free. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论