One place for hosting & domains

      Element

      How To Use a <div>, the HTML Content Division Element



      Part of the Series:
      How To Build a Website With HTML

      This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

      At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

      The HTML Content Division element (<div>) acts as a container to structure a web page into separate components for individual styling. This tutorial will teach you how to create and style <div> containers on your webpage.

      On its own, the <div> element has little effect on the layout of the page and is usually given attributes to adjust its size, color, positionality, or other features. Typically, developers style <div> elements with CSS, but this tutorial will give you an understanding of how <div> elements work by styling them directly in an HTML document.

      The <div> element is styled with the HTML style attribute. As demonstrated in the example below, a <div> element can contain multiple style properties:

      Notice that the <div> element has opening and closing tags but does not require any content. To understand how the <div> element works in practice, clear your index.html file and paste the code below inside. (If you have not been following the tutorial series, you can review instructions for setting up an index.html file in our tutorial Setting Up Your HTML Project.

      <div style="width:300px;height:200px; background-color:red;">
      </div>
      

      Save the file and reload it in the browser. (For instructions on loading the file in your browser, see our tutorial here.) You should receive a red box with a width of 300 pixels and a height of 200 pixels like this:

      Red div

      You can also add content to a <div> element by adding content in between the opening and closing <div> tags. Try adding text in between your <div> tags like so:

      <div style="width:300px;height:300px; background-color:red;">
         This is text inside a div. 
        </div>
      

      Save the file and reload it in the browser. You should receive something like this:

      Div with text

      You can also put <div> containers inside <div> containers. Try adding a yellow <div> container inside the red

      container like so:

      <div style="width:300px;height:300px; background-color:red;">
      <div style="width:100px;height:100px; background-color:yellow;">
      </div>  
      </div>
      

      Save the file and reload it in the browser. You should receive something like this:

      [Div inside div](assets.digitalocean.com/articles/new-learners/div-inside-div.png)

      Note that <div> elements are block-level elements and will start on their own line and push subsequent elements down to the next line. Try adding another <div> element to your file to understand how it is pushed down to the next line (even though there appears to be enough space for it to fit next to the second <div> element:

      <div style="width:300px;height:300px;background-color:red;">
      <div style="width:100px;height:100px; background-color:yellow;">
      </div>
      </div>
      <div style="width:100px;height:100px; background-color:blue;">
      </div>
      

      Save the file and reload it in the browser. You should receive something like this:

      Three divs

      You should now have a basic understanding of how <div> elements work. We will return to <div> elements when we begin building our website in the third section of this tutorial series.



      Source link

      How To Add an HTML <head> Element To Your Webpage



      Part of the Series:
      How To Build a Website With HTML

      This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

      At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

      This tutorial will walk you through the steps of adding a <head> element to your webpage, which creates a section for us to include machine-readable information about our web document. This information is primarily used by browsers and search engines to interpret the content of the page. Content placed inside the <head> element will not be visible on the web page.

      Note:The HTML <head> element is a semantic element in that it tells the browser and the developer the meaning or purpose of its content. Semantic elements are used to aid human readability of an HTML document, provide the browser further information for interpreting the content, improve site accessibility (screen readers use semantic tags), and can assist with SEO positioning.

      Add the opening and closing <head> tags inside of the <html> tags. Next, add two additional lines of HTML code inside the <head> tags like this:

      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      <title> Sammy’s First Website </title>
      </head>
      </html> 
      

      Note that you have nested a variety of HTML elements inside one another. The <title> and <meta> elements are nested inside the <head> element, and the <head> element is nested inside the <html> element. We will nest elements frequently as the tutorial proceeds.

      Let’s now pause briefly to understand the purpose of the code we’ve just added. The line of code after the opening <head> tag—<meta charset="utf-8">—specifies the document’s character set to UTF-8, a unicode format that supports a majority of characters from a wide variety of written languages.

      The next line of code sets the HTML document’s title using the <title> element. The content you insert into this element will be displayed on the browser tab and as the website’s title in search results, but it will not show up on the web page itself. Make sure to replace “Sammy’s First Website” with your name or the name of the website you’re building.

      Though developers often add additional information in the <head> section, we now have sufficient information for creating a basic HTML webpage. Save your file before moving onto the next section. If you try loading the file in your browser, you should receive a blank page.

      You should now know the purpose of HTML <head> elements and how to add one to an HTML file.



      Source link

      How To Use the HTML <body> Element



      Part of the Series:
      How To Build a Website With HTML

      This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

      At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Having a knowledge of how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

      The HTML <body> element is a semantic element that tells the browser that its content is part of the body of the webpage and intended for display. In this tutorial, we will add a <body> element to our web document where we can add content later on.

      To add a <body> element to your document, insert opening and closing <body> tags after the closing </head> tag but before the closing </html> tag. Your document should now have the following code:

      <!DOCTYPE html>
      <html>
      
      <head>
        <meta charset="utf-8">
        <title> Sammy’s First Website </title>
        <link rel="shortcut icon" type="image/jpg" href=”Favicon_Image_Location”/>
      </head>
      
      <body>
      </body>
      
      </html>
      

      You should now understand the purpose of an HTML <body> element and understand how to add one to your HTML file.

      In the next step, we’ll begin to add our website content in between the <body> tags.



      Source link