One place for hosting & domains

      How To Add a Resume or Employment History Section To Your Website With CSS (Section 4)



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

      This tutorial is part of a series on creating and customizing this website with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects.

      Before proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.

      Introduction

      In this tutorial, you will recreate the “Employment” section of the demonstration website (or fourth section) using HTML tables and CSS classes. Feel free to switch out Sammy’s information with your own if you wish to personalize the size. The methods you use here can be applied to other CSS/HTML website projects.

      Employment section of demonstration website

      To build this section, you will add and style a section heading, add and style a wide column, and add and style an HTML table inside of the column.

      Prerequisites

      To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

      Creating a Section Break and Section Title

      To get started, create a class that will add space between the content in the prior “Projects” section and this “Employment” section. Add the following CSS comments and CSS ruleset to the bottom of your styles.css file:

      styles.css

      . . .
      
      /* Section 4 */
      
      /* Add space between sections */
      .section-break {
        margin:50px;
        height:500px;
      }
      

      In this code snippet you have added a CSS comment labeling the CSS rulesets for “Section 4” and a CSS comment explaining the purpose of the section-break class. You will assign this class to an empty <div> in the index.html file, which will give it a height of 500 pixels and a margin of 50 pixels. Though the <div> will be invisible, it’s height will act as a section break by pushing subsequent content 500 pixels down the page.

      Return to your index.html file and add the following code snippet:

      index.html

      . . .
      
      <!--Section 4: Employment—>
      
      <div class="section-break"> </div>
      <h2 class="section-heading">Experience</h2>
      

      This code snippet adds an HTML comment to label the HTML code used for the fourth section of the website, and adds a <div> container assigned the section-break class that you just created. The code snippet also adds the “Experience” section heading and styles it using the class section-heading that you created in the previous tutorial How To Build a Tiled Layout With CSS.

      Note: If you have not been following along with this tutorial series, you can add the section-heading class to your styles.css file by adding the following code snippet to the bottom of the file:

      styles.css

      . . .
      .section-heading {
        text-align:center;
        color:#102C4E;
        margin-top: 150px;
        margin-bottom:70px;
        font-size: 35px;
      }
      

      Save your index.html file and load it in the browser. You should now have a section heading named “Experience” following a section break:

      Screenshot of “Experience

      Styling a Wide Column and Table

      Next, you will create classes that will allow you to style the wide white column and the table you will place inside it. Add the following code snippet at the bottom of the styles.css file:

      styles.css

      . . .
      
      /* Wide column */
      .column-1 {
        width: 90%;
        height: auto;
        padding-top:70px;
        padding-left:70px;
        padding-bottom:70px;
        margin:auto;
        margin-bottom:50px;
        margin-top: 75px;
        background-color:white;
      }
      
      /* Table formatting */
      .table-style {
        width:100%;
        border-spacing: 24px;
      }
      

      In the first ruleset, you have declared a number of style rules for the class column-1. Note that you have specified the width in a percentage so that the column will change size according to the width of the viewport. You have specified the height to auto, which will allow the table to adjust its height according to the height needs of the HTML content you place inside. You have also created a rule to make the background color of a <div> assigned this class white.

      If you want to learn more about the other declarations in this ruleset, please review the previous sections in this tutorial series on setting the sizes of content, padding, and margins.

      In the second ruleset, you have defined the class table-style and declared a number of rules. The width:100% declaration makes the table’s width take up the entire width of the container in which it’s situated, which will be the wide column you’re creating. The border-spacing:24px; declaration puts 24 pixels of space between the cells of the table, allowing the content of the table to take up the width of the column. If you didn’t include this rule, each of the table cells would be much closer together.

      Adding the Column and Table

      Now you will add the column and table to the HTML file. Save your styles.css file, return to the index.html file and add the following code snippet just below the HTML line of code <h2 class="section-heading">Experience</h2>:

      index.html

      . . .
      
      <div class="column-1">
        <h2>Employment</h2>
        <table class="table-style"> 
          <tr>
            <td>Freelance designer</td>
            <td>Seven Seas</td>
            <td>2015-present</td>
         </tr>
          <tr>
            <td>Associate Sea Creature</td>
            <td>Small Pond Productions</td>
            <td>2019-2020</td>
         </tr>
         <tr>
            <td>Associate Surfer</td>
            <td>Open Watery Web</td>
            <td>2018-2019</td>
         </tr>
         <tr>
            <td>Open Web Advocate</td>
            <td>Kiddie Pool Kubernetes</td>
            <td>2017-2018</td>
         </tr>
         <tr>
            <td>Assistant Shark</td>
            <td>Small Pond Pictures</td>
            <td>2016-2017</td>
         </tr>
        </table>
       </div>
      </div>
      

      In this code snippet, you have added a <div> container styled according to the column-1 class and placed an HTML table inside styled with the table-style class. Inside the table, you have placed the Employment history content. The <tr> tag opens up a table row where the following three sets of table data (marked up with the <td> tag) are inserted. To read more about how HTML tables work, please visit our tutorial How To Create Tables With HTML

      Save both files and reload your web page in the browser. Your webpage should now have a single wide column that contains a table with four rows and three columns as pictured at the beginning of this tutorial.

      Note that the first three <td> elements are inserted between the first opening and closing set of <tr> tags. You can continue to add rows by using the same table row and data format and the column’s height will adjust accordingly because you have set the height to auto for the column-1 class. Or, you can add additional columns by adding <td> elements inside the <tr> rows.

      Conclusion

      You have now created and styled a table with CSS to display employment history content in a structured layout. Experiment with sizing and adding rows and columns to customize tables for different purposes. In the next tutorial, you will continue exploring table layout possibilities by creating a table for “Education” and “Skills”.



      Source link

      How To Add Your Educational History and Skills To Your Website Using CSS (Section 5)



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

      This tutorial is part of a series on creating and customizing this website with CSS, a stylesheet language used to control the presentation of websites. You may follow the entire series to recreate the demonstration website and gain familiarity with CSS or use the methods described here for other CSS website projects.

      Before proceeding, we recommend that you have some knowledge of HTML, the standard markup language used to display documents in a web browser. If you don’t have familiarity with HTML, you can follow the first ten tutorials of our series How To Build a Website With HTML before starting this series.

      Introduction

      In this tutorial, you will recreate the “Education” section and “Skills” section (or fifth section) of the demonstration website using HTML tables and CSS classes. Feel free to switch out Sammy’s information with your own if you wish to personalize your website. The methods you use here can be applied to other CSS/HTML website projects.

      Education and Skills section of demonstration website

      To build these sections, you’ll create a CSS class that styles two equal-sized content boxes that can fit side by side on the webpage. You’ll then add a table inside each box where you will add text content.

      Prerequisites

      To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

      Creating and Styling Two Equal-Sized Tables

      First, copy and paste the following code snippet at the bottom of your styles.css file:

      styles.css

      . . .
      
      /* Fifth section */
      
      .column-2a {
        float: left;
        width: 45%;
        padding: 40px;
        padding-left:70px;
        padding-right: 70px;
        padding-bottom:60px;
        height:450px;
        margin:30px;
        margin-right:30px;
        margin-bottom: 40px;
        background-color:white;
      }
      

      This code snippet creates the class column-2a, which is like the column-2 class you created to style the “About” section in a previous tutorial in this series, except that its height property is set to 450px. If you change the amount of content in this box, you may need to adjust the height accordingly, otherwise it may overflow or be cut off. If you want to learn more about the other declarations, please review the previous sections in this tutorial series on setting the sizes of content, padding, and margins.

      Save the styles.css file before you proceed.

      Next, return to the index.html file and paste the following code snippet after the last closing </div> tag:

      index.html

      . . .
      
      <!--Section 5: Education and Skills-->
      
      <div class="column-2a">
        <h2>Education</h2>
          <table class="table-style">
            <tr>
              <td>Barnacle Bootcamp</td>
              <td>2020</td>
            </tr>
            <tr>
              <td>Seaweed University</td>
              <td>2019-2020</td>
            </tr>
            <tr>
              <td>Highwater High School</td>
              <td>2018-2019</td>
            </tr>
            <tr>
              <td>Middle-Sized Pond Middle School</td>
              <td>2017-2018</td>
            </tr>
            <tr>  
              <td>Minnow Elementary School</td>
              <td>2016-2017</td>
            </tr>    
            <tr>
              <td>Phytoplankton Preschool</td>
              <td>2015-2016</td>
            </tr>
          </table>
      </div>
      

      This code snippet creates a column using the “column-2a” class and inserts a table styled with the table-style class created in the previous tutorial. Inside the table, you have placed your Educational history content. The <tr> tag opens up a table row where the following three sets of table data (marked up with the <td> tag) are inserted. To read more about how HTML tables work, please visit our tutorial How To Create Tables With HTML

      Save the file and reload your browser to check that the table is showing up correctly. You should have table like the following screenshot:

      Table with educational content

      Next, you will add the second table that lists Sammy’s skills. Return to the index.html file and paste the following code snippet after the last closing </div> tag:

      index.html

      . . .
      
        <div class="column-2a">
           <h2>Skills</h2>
          <table class="table-style">
            <tr>
              <td>Social Media</td>
              <td>⭐⭐⭐⭐⭐</td>
            </tr>
            <tr>
              <td>Public Speaking</td>
              <td>⭐⭐⭐⭐⭐</td>
            </tr>
            <tr>
              <td>Internet Ethics Ambassador</td>
              <td>⭐⭐⭐⭐</td>
            </tr>
            <tr>
              <td>Content production</td>
              <td>⭐⭐⭐⭐⭐</td>
            </tr>
            <tr>
              <td> HTML</td>
              <td>⭐⭐⭐</td>
            </tr>
            <tr>
              <td> CSS</td>
              <td>⭐⭐⭐</td>
            </tr>
          </table>
        </div>
      

      This code snippet works exactly like the previous code snippet: it creates a column using the column-2a class and inserts a table styled with the table-style class. Note that you are using emojis to create the star image. You can use any emoji as HTML text content.

      Save the file and reload your browser to check that the table is showing up correctly. You should now have two tables displayed side by side as shown in the image at the beginning of this tutorial.

      Conclusion

      You have now added text content using styled tables. You can experiment with sizing and adding rows and columns to customize tables for different purposes. In the next tutorial, you will create a content box with a large featured quote on your website.



      Source link

      How To Add Images To Your Webpage Using HTML



      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.

      In this tutorial, we’ll learn how to use HTML to add images on a website. We’ll also learn how to add alternate text to images to improve accessibility for site visitors who use screen readers.

      Images are added to an HTML document using the <img> element. The <img> element requires the attribute src which allows you to set the location of the file where the image is stored. An image element is written like this:

      <img src="https://www.digitalocean.com/community/tutorials/Image_Location">
      

      Note that the <img> element does not use a closing </img> tag. To try using the <img> element, download our image of Sammy the Shark and place it in your project directory html-practice.

      Note: To download the image of Sammy the Shark, visit the link and CTRL + Left Click (on Macs) or Right Click (on Windows) on the image and select “Save Image As” and save it as small-profile.jpeg to your project directory.

      Next, erase the content of your index.html file and paste <img src=”Image_Location”> into the file. (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.

      Then, copy the file path of the image and replace Image_Location with the location of your saved image. If you are using the Visual Studio Code text editor, you can copy the file path by using CTRL + Left Click (on Macs) or Right Click (on Windows) on the image file small-profile.jpeg in the left-hand panel and selecting “Copy Path.” For an illustration of the process, please see the gif below:

      Gif of how to copy an image file path

      Note: Make sure to copy the relative or project file path of the image rather than the absolute or full file path of the image. The relative path refers to the file location relative to the current working directory (as opposed to the absolute path, which refers to the file location relative to the root directory.) While both paths will work in this instance, only the relative path would work if we decided to publish our website online. Since our end goal is to create a publishable website, we will start using relative paths now when adding <img> elements to our document.

      Save your index.html file and reload it in your browser. You should receive something like this:

      Image in browser

      Technically, you can also use links to images hosted online as file paths. To understand how this works, try replacing the image location with a link to our image of Sammy the Shark like this:

      <img src="https://html.sammy-codes.com/images/small-profile.jpeg">
      

      Save your file and reload it in the browser. The image should still load in your web document, but this time the image is being sourced from its online location rather than your local project directory. You can experiment with adding other online images by using their location links as the src attribute in the <img> tag.

      However, when building a website it is generally better to host your images in your project directory to ensure the sustainability of the site. If the image is taken down by its host or if its address changes, it will no longer render on your site.

      Alternative Text for Accessibility

      HTML provides an option for adding alternative text to images to improve accessibility to site visitors who are visually impaired or use screen readers. This text should describe the content of the image and is added with the alt attribute:

      <img src="https://html.sammy-codes.com/images/small-profile.jpeg" alt="This is an illustrated image of Digital Ocean’s mascot, a blue smiling shark." >
      

      You should now have familiarity with how to add images to your HTML document and how to add alternative text to aid with accessibility. We’ll learn how to change the image size and style in the tutorial How To Add a Profile Image To Your Webpage later on in the series. In the next tutorial, we’ll learn how to add links to an HTML document.



      Source link