Posts

index.html & style.css

    <!DOCTYPE html> <html> <head> <link rel = "stylesheet" type = "text/css" href = "style.css" > </head> <body> <header> <h1> Navigational Links </h1> <nav> <ul> <li><a href = "#home" > Home </a></li> <li><a href = "#posts" > Posts </a></li> <li><a href = "#contact" > Contact </a></li> </ul> </nav> </header> <main> <section> <article> <h2> Facts About Dogs </h2> <p> Dogs have a sense of time. It's been proven that they know the difference between a hour and five. If conditioned to, they can predict future events, such as regular walk times. </p> </article> ...
Post a Comment
Read more

Semantic tags review

  SEMANTIC HTML Review Congrats on completing this lesson on Semantic HTML! Now that you know the benefits of Semantic HTML and how to use it, you can incorporate semantic elements into your website to make it more accessible and to make the code easier to read. Let’s review some of the topics we covered throughout the lesson: Semantic HTML introduces meaning to a page through specific elements that provide context as to what is in between the tags. Semantic HTML is a modern standard and makes a website accessible for people who use screen readers to translate the webpage and improves your website’s SEO. <header> ,  <nav>  ,  <main>  and  <footer>  create the basic structure of the webpage. <section>  defines elements in a document, such as chapters, headings, or any other area of the document with the same theme. <article>  holds content that makes sense on its own such as articles, blogs, comments, etc. ...
Post a Comment
Read more

video tag and its attributes and embed tag used for gifs(graphics interchange format)

  SEMANTIC HTML Video and Embed As demonstrated in the previous exercise, media content can be a useful addition to a website. By using a  <video>  element, we can add videos to our website. The  <video>  element makes it clear that a developer is attempting to display a video to the user. Some attributes that can alter a video playback include: controls : When added in, a play/pause button will be added onto the video along with volume control and a fullscreen option. autoplay : The attribute which results in a video automatically playing as soon as the page is loaded. loop : This attribute results in the video continuously playing on repeat. Below is an example of  <video>  being used with the controls attribute: <video src = "coding.mp4" controls > Video not supported </video> In the code above, a video file named  coding.mp4  is being played. The “Video not supported” will only show up if the browser is una...
Post a Comment
Read more

audio tag & its attributes

  SEMANTIC HTML Audio and Attributes Now that we learned about text-based content, let us dig into  <audio> ! Surely everyone needs  <audio> —how else would you listen to your Korean hip hop? The  <audio>  element is used to embed audio content into a document. Like  <video> ,  <audio>  uses  src  to link the audio source. <audio>    <source src = "iAmAnAudioFile.mp3" type = "audio/mp3" > </audio> In this example, we created an  <audio>  element. Then we created a  <source>  element to encapsulate our audio link. In this case,  iAmAnAudioFile.mp3  is our audio file. Then we specified the type by using  type  and named what kind of audio it is. Although not always necessary, it’s recommended that we state the type of audio as it helps the browser identify it more easily and determine if that type of audio file is supported by th...
Post a Comment
Read more

figure and figcaption tag

  SEMANTIC HTML Figure and Figcaption With  <aside> , we learned that we can put additional information next to a main piece of content, but what if we wanted to add an image or illustration? That is where  <figure>  and  <figcaption>  come in. <figure>  is an element used to encapsulate media such as an image, illustration, diagram, code snippet, etc, which is referenced in the main flow of the document. <figure>    <img src = "overwatch.jpg" > </figure> In this code, we created a  <figure>  element so that we can encapsulate our  <img>  tag. In  <figure>  we used the  <img>  tag to insert an image onto the webpage. We used the  src  attribute within the  <img>  tag so that we can link the source of the image. It’s possible to add a caption to the image by using  <figcaption> . <figcaption> ...
Post a Comment
Read more

aside tag

  SEMANTIC HTML The Aside Element The  <aside>  element is used to mark additional information that can enhance another element but isn’t required in order to understand the main content. This element can be used alongside other elements such as  <article>  or  <section> . Some common uses of the  <aside>  element are for: Bibliographies Endnotes Comments Pull quotes Editorial sidebars Additional information Here’s an example of  <aside>  being used alongside  <article> : <article>    <p> The first World Series was played between Pittsbur gh and Boston in 1903 and was a nine-game series. </p> </article> <aside>    <p>    Babe Ruth once stated, “Heroes get remembered, but legends never die.”    </p> </aside> As shown above, the information within the  <article>  is the important content...
Post a Comment
Read more