But there are other tags, to name a few:

• … will den Italicize text between the opening and closing tags
• … is underlined

• …

  is a paragraph of text

• …

  is the main heading on the page

Besides these simple tags, there are also more complex tags. For example, if you want to create a list like this:

• Item 1
• Item 2
• Item 3

… this works with the following HTML code:

• Point 1
• Point 2
• Point 3

Or if you want to add a link to another page, like this one:

This is a link to our home page

… you can do that with this piece of code:

This is a link to my home page

Read this for the full list the HTML tags. It will be useful when you create a website with HTML and CSS.

2. Understanding the Structure of HTML Documents

Imagine your HTML page as if it were built out of Lego bricks. You put different building blocks on top of each other to end up with a certain larger structure.

But instead of Lego bricks, you get HTML tags…

Here is the most basic HTML document structure:

Hello world!

My first website.

You can take the above code, copy and paste it into a new file, save the document as index.html , and it will be a perfectly valid HTML page.

Let’s explain each part of this code:

• – the initial declaration of the document
• – another declaration; says that an English HTML document will be written next
• – marks the beginning of the head section; All the basic parameters of the page are located in the head area. most of these are off-screen; they just define what’s going on under the hood
• – defines what charset is used to write the document; no need to spend too much time on it; just use this declaration as is
• – the title of the page; that’s what people see in their browser’s title bar, e.g. e.g.:

• – marks the beginning of the body section; all the content of the page goes here; it is the body of an HTML document; Let’s emphasize this, in this section you will put all the content that should appear on the page

• Hello world!

  – the main heading on the Page

• My first web page.

  – a simple text paragraph

• – the closing tag of the whole HTML document

Here is an important note. Working on an HTML file in a simple text application or a complex word processor like MS Word is not a good experience. To make things easier for yourself, install an HTML editor called Sublime Text. There are versions for Mac and PC and it’s free.

Why is it better? Among other things, it colors the syntax of an HTML file. That is, it visually distinguishes your HTML tags from text content, tag parameters, and other values. Basically everything becomes readable. This is what our simple HTML structure looks like in Sublime Text:

Okay, back on topic. You can take this new index.html file from you, copy it to your web server’s root directory, and then view this page by navigating to it from a web browser. Don’t get too excited though; this page will be pretty ugly (see below).

Okay, so the page is ugly, how not to do it?

3. Meet CSS selectors

Just as HTML has its tags, CSS has selectors.

Selectors describe how a given element behaves in terms of appearance should. Here is an example CSS selector:

p { font-size: 18px; }

This selector specifies that all HTML

tags within the document have a font size of 18 pixels.

However, a more practical way to use CSS selectors is to not restricting all tags from a to giving a certain style a certain type, but instead creating different “classes” and assigning tags to them one by one.

For example, a class selector in CSS looks like this:

. normal-text { font-size: 18px; }

Note the period (.) in front of the class name (plain text). Now that the “plain text” class is defined, we can assign this class to the specific HTML tags that we want to resize to 18 pixels.

For example:

This text will be 18 pixels tall.

Let’s take another minute to explain all the elements of this CSS code above:

• .normal-text – class definition; everything after the name of the class and between the opening and closing brackets {} defines how the elements assigned to this class will look like
• font-size – an example of a CSS property
• 18px – a value assigned to the property

There are a lot of CSS properties apart from the font size above. Here’s the full list if you’re curious.

4. Composing a CSS Stylesheet

An HTML document is very structural – each element has its place, and the order of the elements is crucial to the final layout and appearance of the webpage in question. A CSS document is much less so.

CSS documents are often referred to as style sheets. Basically, a CSS style sheet is a list of all class definitions used in the corresponding HTML document. The order of the class definitions isn’t that critical most of the time (at least for simple designs).

The way you put together a CSS style sheet is to define each class individually and then test that the result in your page design is what you wanted.

It sounds like tedious work, and it is.

But we make it easy for you and don’t force you to learn HTML and CSS design by hand. Instead of teaching you everything from scratch, we’re going to take a living organism and dissect its elements.

This is where a thing called Bootstrap comes in.

5.Download/Install Bootstrap

Bootstrap is an open source toolkit for creating a website using HTML and CSS.

In plain language: Bootstrap takes care of the basic structure of an HTML document and CSS -Style sheet for you. It provides a framework that ensures that the main body of your website is ready and optimized for further development.

Basically, with Bootstrap you can’t start from scratch and instead go straight to the fun part. This eliminates the need to work with HTML and CSS in the often tedious early stages of creating a website.

There are two routes you can take:

• Option (a): Learn Bootstrap – go to the Bootstrap home page, download and build on the Bootstrap main package.
• Option (b) : Take a shortcut – Get a Bootstrap starter pack with a nice looking theme and a demo website already built.

Option (a) might have There is a bit of a learning curve at first, but it’s by no means a bad way to build a website using HTML and CSS. Once you master the core Bootstrap structure, you may find it easier to create new pages and make them look exactly how you want them to. The Bootstrap documentation is a great place to start on this path.

We will choose option (b) for this guide. We do this for a number of reasons, the main being:

Starting with a ready-made structure saves a lot of effort trying to figure out the basic necessities of an HTML document. This allows you to focus on the interesting things, such as B. the layout of content and how it looks pleasing.

In short, if you learn things this way, you’ll get a better-looking result faster, which we think is what you want.

p>

6. Choose a Theme

If you’re building a website using HTML and CSS, you can use any Bootstrap template you like. They should all work similarly enough.

See also: How to write a good resume

However, for this tutorial we’ll be using one of the Start Bootstrap templates. They have a nice selection of free templates that are optimized, work flawlessly and are also very well designed.

The theme we are going to use is called Creative. The final effect we are aiming for looks something like this:

To start the theme template, click the enabled Free Download button on the right (on this page) and save the ZIP package to your desktop.

Unzip the package and move its contents to the root directory of your local web server or web hosting account.

Now open this location via your web browser. You will see the default version of the template:

It’s already looking pretty good, but now it’s time to learn how to make it exactly how you want it using HTML and CSS.

7. Customize your website with HTML and CSS

Let’s work on the home page theme first. This will show us how to replace the graphics, text, and optimize everything in general.

We briefly talked about the head section of an HTML document above. Let’s take a closer look here.

If you open your Bootstrap site’s index.html file in Sublime Text, you’ll see a head section like this (we all have non-essential stuff from this code for clarity *):

* Aside from the above, there was also code to load Google Fonts, Font Awesome icons, and a lightbox module for the images displayed on the page.

Most of the explanations have we already know here, but there are a few new ones:

• First of all, everything between the brackets is an HTML comment. It doesn’t show up on the last page.
• – it is one of Bootstrap’s own declaration tags. It defines the size of the site’s viewport.
• – this line loads and contains the CSS stylesheet of the creative template also Bootstrap’s default stylesheet.

Let’s change that last declaration – the line that loads the CSS – to make it easier to work with later.

Change this line to :

This is just a minor difference – it will use the untruncated version of the same CSS sheet loaded. This version is just easier to modify.

Now scroll all the way down in the index.html file. Just before the closing body tag you will see the following lines:

They are responsible for loading JavaScript files that handle some of the more visual interactions of the theme. For example, clicking the About link in the top menu takes you seamlessly to the About block on the same page — one of the ways it does this is through JavaScript. We don’t need to bother to understand this code now. Let’s leave that for another time.

Let’s work on adding our own content to the site instead:

8. Add content and images

First thing to do is change the title of the page.

1. Change the title

Locate the title tag in the head section and replace the text between the tags with something of your own:

2. Customize the hero area

We call this block the hero area:

It would be cool to have our own content in it. To change this block, go back to your index.html file and locate this section:

This whole block of code controls what goes in the hero section.

There are some new ones here Tags:

• – this is a tag that defines that this entire section is the header of the page; This tag has a few brothers and sisters in the form of the

  tag and the

• – is a generic CSS tag that indicates that what follows is a separate section is (aka division) in the HTML document; using it makes it easier to visually distinguish individual sections on the page

You’ll also notice that some of the other tags (that we already know about) look a bit more complex, with multiple CSS assigned to them -classes. For example:

…

The classes assigned to the

tag here are uppercase text -white font-weight-bold.

These classes were created by Bootstrap and the creative theme developer. The good news is that you too are free to use them if you’re building a website using HTML and CSS.

Honestly, you can customize any tag you add to your page’s structure by adding it assign any number of classes.

If you want to see the full list of available classes, you can open the main creative.css file, located in the css subdirectory of the creative theme.

Get an overview All these classes can seem intimidating at first, but it’s actually a lot easier than it looks.

For example, one of the classes assigned to some paragraphs in our index.html file is font- weight-light . If you jump into the creative.css file and search Ctrl+F for that class name, you’ll see that the font-weight parameter is simply set like this:

.font-weight-light { font-weight : 300; }

Changing the default texts in the index.html file is very easy. Just find the tag you want to edit and change the content between the opening and closing tags.

For example, to change the main heading, just change:

Your favorite…

To something like this:

Admire my HTML website!

You can do the same with all the paragraphs and other tags on the page.

Importantly, you can also add new paragraphs freely. For example, we can take the paragraph already on the page, make a copy of it and paste it just below the original paragraph; like this:

Bootstrap can start …

Paragraph 2

Now that we’ve taken care of the texts, let’s replace the image in the background.

p>

This is a bit more complicated as we need to go into the CSS stylesheet file and make the change there. As you can see in the HTML of the masthead section, no tag would indicate that an image would be inserted into the page in any way. This is all done through CSS.

If you look back at the entire block of code that handles the “Masthead” section, you’ll see that it’s assigned to a class called “Masthead”. This line of code handles the class assignment: