Categories
html-css-tutorials

Create an HTML page resume by using 9 html element with ease

Are you looking to create an HTML page?
In this HTML tutorial, you will create your first HTML page by making use of nine html elements. 

For this exercise, I have taken the design of a simple resume. This is how your HTML resume will look like.

As promised, we will learn HTML CSS by doing.

This tutorial is part 1 of the exercise to create a simple HTML CSS Resume.

I also recommend going through these 14 HTML CSS basic

This is how your HTML Page Resume will look like.

Create an HTML page resume
Create an HTML page resume

We will only use some HTML elements semantically and get the resume’s structure and content ready in this part.

In part 2 (coming soon), we will add some basic styling to the first HTML page created by you.

Tools needed to create an HTML page

We need the following tools to create an HTML page:

  • An HTML Editor (local or online editor)
  • A browser to test 

For this tutorial, I am using glitch.com, which is an excellent online editor for coding.

So let’s create an HTML page resume with the following content:

I have divided this simple HTML page resume into the following five sections

  • Your Name& A short description of your experience and current status
  • Your photograph
  • Your Experience history
  • Your Academic background or qualification
  • Contact details

Here is the list of nine HTML elements that we will use to create an HTML page

In this HTML tutorial, we will learn and make use of the following HTML elements:

  • <section>
  • <p> – Paragraph element
  • Header elements (from h1, h2, h3)
  • <strong>
  • <img /> – element to display your photograph
  • <hr /> – Horizontal rule
  • <ul> – Un ordered list element

Create an HTML page- start with a blank HTML document

Start by creating a blank HTML page that has the base HTML elements.

When you create a page using glitch.com, or any HTML editor, they provide a blank page with the default elements. Below is the code on how your blank page should look. You can simple copy and paste the code below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    
    
  </body>
</html>

Below is the screenshot of the code of a blank HTML page.

Click here to read more about the anatomy of an HTML page. 


Create an HTML page – Section one – Add name and description

Let’s start by adding your name and a short description. We will make use of the following seven HTML Elements for this section:

  • Section
  • h1
  • strong
  • paragraph

Create an HTML page – Section Element

The <sectionelement defines a section in a document. According to W3C’s HTML documentation: “A section is a thematic grouping of content, typically with a heading.” 

A web page is split into sections for introduction, content, and contact information.

Below is the code with section element inside the body element.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
    </section>
  </body>
</html>

Create an HTML page – h1 Element

The HTML h1–h6 elements represent six levels of section headings. h1 is the highest section level, and h6 is the lowest.

As a thumb rule, one HTML page should only have one h1 HTML element, and it should have the most important keyword of your page.

h1 element is primary used for page titles.

Look at the code below, I have added an h1 element inside the section element and I added my name inside the h1 element

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
      <h1>
        Parvez Ansari
      </h1>
    </section>
  </body>
</html>

Create an HTML page – Strong Element

The HTML <strongelement defines text with strong importance. The content inside is typically displayed in bold.

Look at the code below, I have added a strong element inside the h1 element to give some importance to my first name

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
      <h1>
        <strong>Parvez</strong> Ansari
      </h1>
    </section>
  </body>
</html>

An element inside an element is called Nesting in HTML.

Use paragraph element to Create an HTML page

The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

Look at the code below. I have used the paragraph element to display the description.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
      <h1>
        <strong>Parvez</strong> Ansari
      </h1>
      <p>
        A developer turned User Experienced Designer Writer, Trainer and a Mentor
      </p>
    </section>
  </body>
</html>

Let’s take at the screen shot below. This is how your html page should look in the browser.

HTML Page Resume - Name and Description
HTML Page Resume – Name and Description

If your page looks like the screen shot above, you have developed the first section of your HTML Page resume.

In this section we learnt the following four html elements:

  • <section>
  • <h1>
  • <strong>
  • <p> paragraph

Create an HTML page – Section two – Add photograph

In this section we will add our photograph.

We make use of the Image element to insert a photograph in an HTML page

Use Image Elemenr to Create an HTML page –

The HTML <img> tag is used to embed an image in a web page. Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image. The <img> tag is empty, it contains attributes only, and does not have a closing tag.

We link an image by providing the image path in the src (source) attribute.

Lets take a look at the code below

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
      <h1>
        <strong>Parvez</strong> Ansari
      </h1>
      <p>
        A developer turned User Experienced Designer Writer, Trainer and a Mentor
      </p>
    </section>
    <section>
      <img src="https://i.ibb.co/9yWxfzw/parvez-pp1.jpg" alt="parvez-pp1" border="0">
    </section>
  </body>
</html>

I created another section for the photograph and added an image element.

I also added the path of the image in the value of the src attribute.

For this exercise I have uploaded the photograph on https://imgbb.com/ which is a free site that allow you upload images.

Create an HTML page – hr Element

The <hrtag defines a thematic break in an HTML page (e.g. a shift of topic). The <hrelement is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.

Take a look at the code below, I added a hr element between the two section to create a break.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
      <h1>
        <strong>Parvez</strong> Ansari
      </h1>
      <p>
        A developer turned User Experienced Designer Writer, Trainer and a Mentor
      </p>
    </section>
    <hr />
    <section>
      <img src="https://i.ibb.co/9yWxfzw/parvez-pp1.jpg" alt="parvez-pp1" border="0">
    </section>
  </body>
</html>

With the code above, your html page should look like the following screen shot.

HTML Resume photograph
HTML Resume photograph

In this section we learnt the following two html elements:

  • <img /> image element
  • <hr /> (horizontal rule)

Create an HTML page – Section three – Experience history

In this section we will add some experience history.

We will make use of the next two level of headings after h1 element.

h2 element

The HTML <h2tag defines the second level heading in the HTML document. This tag is also commonly referred to as the <h2element.

h3 element

The h3 element represents a level 3 heading. 

Look at the code below

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
      <h1>
        <strong>Parvez</strong> Ansari
      </h1>
      <p>
        A developer turned User Experienced Designer Writer, Trainer and a Mentor
      </p>
    </section>
    <hr />
    <section>
      <img src="https://i.ibb.co/9yWxfzw/parvez-pp1.jpg" alt="parvez-pp1" border="0">
    </section>
    <hr />
    <section>
      <h3>
        Experience History
      </h3>
      <h2>
        Design Capital Ventures LLP <strong>Senior Product Designer</strong>
      </h2>
      <p>
        March 2019 to Till Date
      </p>
    </section>
  </body>
</html>

I added a new section for Experience history.

I have made use of h3 element to create a sub heading for “Experience history” and I used h2 element to display the name of the organisation that I am working for.

I am using a paragraph element to display the duration of this experience.

Let us now add some roles and responsibilities by making use of a unordered list element.

Unordered List Element

The HTML <ul> element represents an unordered list of items, typically rendered as a bulleted list.

The <ul> element is for grouping a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unorderedlist items are displayed with a bullet, which can be of several forms, like a dot, a circle, or a square.

Look at the code below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>  
  <body>
    <section>
      <h1>
        <strong>Parvez</strong> Ansari
      </h1>
      <p>
        A developer turned User Experienced Designer Writer, Trainer and a Mentor
      </p>
    </section>
    <hr />
    <section>
      <img src="https://i.ibb.co/9yWxfzw/parvez-pp1.jpg" alt="parvez-pp1" border="0">
    </section>
    <hr />
    <section>
      <h3>
        Experience History
      </h3>
      <h2>
        Design Capital Ventures LLP <strong>Senior Product Designer</strong>
      </h2>
      <p>
        March 2019 to Till Date
      </p>
      <ul>      
        <li>Actively participate in product definition and contribute ideas</li>
        <li>Conduct User Interviews and identify insights</li>
        <li>Brainstorm and propose ideas</li>
        <li>Designing Userflows / Wireframes / Interfaces</li>
        <li>Develop Interactive Prototype using Figma and HTML/CSS</li>
        <li>Designing the Mobile App (iOS + Android)</li>
        <li>Design Emailers</li>
      </ul>  
    </section>
  </body>
</html>

If you have followed the instruction correctly, your html page should look like the screenshot below.

HTML page resume with experience
HTML page resume with experience

With the code above we have added the third section to our html page.

In this section we learnt the following three html elements:

  • <h3>
  • <h2>
  • <ul> Unordered list

Create an HTML page – Exercise 

Now that you have created your first HTML page let’s test your learning by working on the following task.

  • Add three more sections (skills, Achievements & Awards, Personal details) similar to how you added the experience section.
  • Add multiple experiences within the Experience section

Conclusion

In this tutorial we learnt to create an HTML page which is a simple resume by making use of the following nine html elements.

  • <section>
  • <p> – Paragraph element
  • Header elements (from h1, h2, h3)
  • <strong>
  • <img /> – element to display your photograph
  • <hr /> – Horizontal rule
  • <ul> – Un ordered list element

Click here to view the entire code.

Please subscribe and stay tuned for my next CSS tutorial in which we will apply learn and write your first css code to apply some basic styles to this HTML resume

Feel free to leave feedback.

Categories
html-css-tutorials

How to include CSS in HTML

Did you know “How to include css in html” is one of the most commonly asked HTML CSS interview questions during interview.
You need to be fundamentally very clear on the different ways to include css in html page

How to include css in html
how to include css in html

In this post I will show you the different ways on how to include css in html file and the difference between each method.

Prerequites:
You have a basic understanding of what is HTML and you also know what is CSS.
Assumption is you already have an html page where you want to include css.

Tools needed:
An HTML Editor. You can use any html editor installed on your system or you can use any of the online html css editors. 
A browser of your choice to see you output.

I am using the online editor glitch.com in google chrome browser so that this is the only thing I need.


Different ways on how to include CSS in HTML

Basically there are 3 different ways to include CSS in HTML

  1. By linking an external css file
  2. By writing internal css in html page
  3. By writing Inline CSS in html page

Let’s look at each of these methods one by one with practical implementation. 


How to include css in html: Link External CSS

Method 1 : How to link a CSS file to HTML

This is the ideal and the most preferred method. 
In this method you put all your styles in a different css file and load the styles by linking the css file into your html documents.

You can do this by either linking a files on your own system/server or your link from a different source.

Link a css file from your local system or server.

This css file can reside in your local project directory of your local system or on your own server.
The screen shot below is the source code of your html document.

How to include css in html - HTML Document
How to include css in html – HTML Document

The screen shot below is the source code of your style.css file

External CSS File
How to include css in html – External CSS File

Below is the code to link an external css file. Make the sure the css file is in the same directory.

All you need to do this is put this code in the <head> tag of your html document. Make sure you have a file named styles.css in your system

<link rel="stylesheet" href="/style.css">

Can you see the text color of the heading “hi There!” is blue. 
This is because we are setting the css property of the text color of h1 element to #373fff in our style.css file.

h1{
 color:#373fff;
}

Link an external css from a different source

You can also link an external css from a different source.
Look at the screenshot below. In this example the code highlighted shows how to to link an external css from a bootstrap server. 

How to include css in html - Link External CSS
How to include css in html – Link External CSS from a different source

Did you noticed how the color of the heading has changed to ‘black’ color and the all the margin is gone.
This is because we are loading styles from the bootstrap.min.css.

Benefits of External CSS

While there are many benefits of this method, here are some of the most obvious ones:

  • You separate styles from markup
  • Developers/Engineers do not need to bother and work on your css files 

This method is same as the following methods:

  • how to connect css to html
  • how to connect html to css
  • how to attach css to html
  • how to reference css in html

How to include css in html: Internal CSS

Method 2 : How to add internal css in html page

In this method you write the styles in the head tag of the html page itself. 

Let’s take a look at the screenshot below:

Internal CSS
How to include css in html – Internal CSS

As you can see I added some styles for the h1 element within the style tag of the page itself.
Can you see how the text color of the heading changed to black.
This is because of the css styles written in the page.

What we learnt now that styles written in the style tag of the page will override the styles coming from external css.

Internal CSS takes precedence over External CSS rules

It over rides the styles written in the external css files

When to use Internal CSS

  • For a single page website
  • If you do not have access to external css file 
  • If you need to make some changes to reflect only on a single page

This method is same as the following methods:

  • how to insert css in html
  • how to apply css to html

How to include css in html: Inline CSS

Method 3 : How to write Inline css in html

In this method you write the styles in the element tag itself.
Let’s take a look at the screen below to see inline css in action.

How to include css in html - Inline CSS
How to include css in html – Inline CSS in html

Can you see the color of the header has changed to ‘red’. This is because we have added an inline style in the h1 element itself.

When to use inline style

  • When you want a small change to take place on a particular element and you have access to HTML file.
  • For quick fixes
  • When you do not have access to external css files
  • In emergency when you are not familiar with main external css file
  • Inline CSS are a standard practice for HTML emailers
  • Use inline css for a single page website where each element has different styles

Which styles takes precedence over what?

As you notice this document has 3 styles defined for the text color of the header:

  • Color ‘blue’ defined in the external css file
  • Color ‘black’ defined in the internal style tag
  • Color ‘red’ defined in the inline style.

And the final color of the header text is red. This is because:

Inline CSS takes precedence over Internal and External CSS rules.

Inline css over rides the styles written in the internal styles and external css files

Where to put css in html

Wondering where to put css in html?
It all depends on the methods you choose on how to include css in html.

  • If you are planning to use Method 1 ie. an external css, you obviously write your styles in the external css file and link the file in your html page to load the styles.
  • If you are planning to use method 2  ie. internal css method, you write the styles inside a style tag in the head element of your html page.
  • If you prefer inline css method than you write the styles in the element tag itself

How to import CSS in html

Importing a css is not very different from linking an external css.
You can import CSS in html using either of the 2 methods below

Import as a string

@import "navigation.css"; /* Using a string */

or Import as URL

@import url("navigation.css"); /* Using a url */

Know the Difference Between @import and <link>


Try yourself on how to include CSS in HTML

The best way to learn is to do by yourself. Below is the link to the sample code I have shared in this article. Feel free to play around.

https://glitch.com/~-how-to-include-css-in-html


Wrapping up

In this post we learnt the 3 different methods of how to include css in html.
I hope this post has answered your question and clarified all your doubts in regards to how to include CCS in html document.

Please share this post if you have found this helpful.

Feel free to leave feedback in the comment sections. Also let me know if you would like help on more such articles.