Posts

Showing posts from November, 2022

Flat tree vs Structured tree

Image
 
Post a Comment
Read more

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

article tag and Section tag

  SEMANTIC HTML Article and Section Now that we covered the body of Semantic HTML, let’s focus on what can go in the body. The two elements we’re going to focus on now are  <section>  and  <article> . <section>  defines elements in a document, such as chapters, headings, or any other area of the document with the same theme. For example, content with the same theme such as articles about cricket can go under a single  <section> . A website’s home page could be split into sections for the introduction, news items, and contact information. Here is an example of how to use  <section> : <section>    <h2> Fun Facts About Cricket </h2> </section> In the code above we created a  <section>  element to encapsulate the code. In  <section>  we added a  <h2>  element as a heading. The  <article>  element holds content that makes sense on...
Post a Comment
Read more

main and footer tag

  SEMANTIC HTML Main and Footer Two more structural elements are  <main>  and  <footer> . These elements along with  <nav>  and  <header>  help describe where an element is located based on conventional web development standards. The element  <main>  is used to encapsulate the dominant content within a webpage. This tag is separate from the  <footer>  and the  <nav>  of a web page since these elements don’t contain the principal content. By using  <main>  as opposed to a  <div>  element, screen readers and web browsers are better able to identify that whatever is inside of the tag is the bulk of the content. So how does  <main>  look when incorporated into our code? That’s a great question. <main>    <header>      <h1> Types of Sports </h1>    </header>  ...
Post a Comment
Read more