Css and html website tutorial

How To Set Up Your CSS and HTML Website Project

In this tutorial, you will set up the folders and files necessary for building a website with HTML and CSS. You will also prepare an index.html file so that it is ready to receive HTML content in the tutorials ahead.

Prerequisites

If you have been following along with this tutorial series, you can continue using the css-practice project directory, index.html file, images folder, css folder, and styles.css file that you created earlier in the series. If you have not been following along this tutorial series and need instructions for setting up these folders and files, please see our earlier tutorial in this series How To Set Up Your CSS and HTML Practice Project.

Note: If you decide to create your own names for the folders or files, make sure to avoid character spaces, special characters (such as !, #, %, or others), and capital letters, as these can cause problems later on. Be aware also that you will need to modify your file paths in some of the steps throughout the remainder of this tutorial series to ensure that they correspond with the names of your files.

You should have a project folder named css-practice that contains the following folders and files that are necessary to explore CSS in this tutorial series:

• A folder named css that contains the file styles.css
• An empty folder named images
• A file named index.html

In the first step of this tutorial, you will prepare the index.html file so that it is ready to receive content in the tutorials ahead.

How To Prepare Your index.html File For HTML Content

To prepare your index.html file to serve as your website’s homepage, we’ll need to add a few important lines of HTML. These lines of HTML will serve as instructions for the browser and will not be displayed on the webpage itself. Make sure that your index.html file is empty (if you have content from previous tutorials) and add the following code snippet to the document:

DOCTYPE html> html lang="en"> head> meta charset="utf-8"> title>Sammy the Sharktitle> link rel="stylesheet" href="css/styles.css"> head> body> body> html> 

Make sure to change the highlighted site title with a title of your own choosing. Then save the index.html file. Before continuing, let’s briefly review the code that you just added to understand its purpose:

• The declaration tells the browser which type of HTML is being used in this document. It is important to declare this value as there are multiple versions of the HTML standard, and browsers need to know which to use. In this declaration, html specifies the current web standard of HTML, which is HTML5.
• The opening and closing tags tell the browser that all content inserted between these two tags should be interpreted as HTML. Inside this tag, you also added the lang attribute, which specifies the language of the webpage. In this example, the language is set to English using the en language tag. For a full list of language tags, visit the IANA Language Subtag Registry.
• The opening and closing tags creates a section in the HTML document that typically contains information about the page, rather than page content itself. Browsers do not display the information in a section.
• The tag specifies the document’s character set should be UTF-8, a unicode format that supports a majority of characters from a wide variety of written languages.
• The tag tells the browser the name of the webpage. This title appears on the browser tab and when the site is listed in search results but it does not show up on the web page itself. Make sure to replace “Sammy the Shark” with your name or a title of your choosing if you want to personalize the site.
• The tells the browser where to find the stylesheet that contains the style rules. If you followed the instructions earlier in this series How To Set Up Your CSS and HTML Practice Project, your stylesheet should be located at this file path.
• The opening and closing tags will contain the main content of the webpage. You’ll add the HTML content between these tags in the tutorials ahead.

Conclusion

You have now created all of the folders and files necessary for creating a website with HTML and CSS. You should also have an index.html file prepared with the necessary HTML content for serving as your website’s homepage. In the next tutorial, you’ll explore how the demonstration site is constructed and the steps you will take to recreate it.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Tutorial 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.

Источник

How TO — Make a Website

Learn how to create a responsive website that will work on all devices, PC, laptop, tablet, and phone.

Create a Website from Scratch

A «Layout Draft»

It can be wise to draw a layout draft of the page design before creating a website:

Navigation bar

Side Content

Main Content

Footer

First Step — Basic HTML Page

HTML is the standard markup language for creating websites and CSS is the language that describes the style of an HTML document. We will combine HTML and CSS to create a basic web page.

Example

My Website

A website created by me.

Example Explained

• The declaration defines this document to be HTML5
• The element is the root element of an HTML page
• The element contains meta information about the document
• The element specifies a title for the document
• The element should define the character set to be UTF-8
• The element with name=»viewport» makes the website look good on all devices and screen resolutions
• The element contains the styles for the website (layout/design)
• The element contains the visible page content
• The element defines a large heading
• The

  element defines a paragraph

Creating Page Content

Inside the element of our website, we will use our «Layout Draft» and create:

• A header
• A navigation bar
• Main content
• Side content
• A footer

Header

A header is usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the website name:

Then we use CSS to style the header:

.header <
padding: 80px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c; /* green background */
color: white; /* white text color */
>

/* Increase the font size of the element */
.header h1 font-size: 40px;
>

Navigation Bar

A navigation bar contains a list of links to help visitors navigating through your website:

Use CSS to style the navigation bar:

/* Style the top navigation bar */
.navbar overflow: hidden; /* Hide overflow */
background-color: #333; /* Dark background color */
>

/* Style the navigation bar links */
.navbar a float: left; /* Make sure that the links stay side-by-side */
display: block; /* Change the display to block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center; /* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none; /* Remove underline */
>

/* Right-aligned link */
.navbar a.right float: right; /* Float a link to the right */
>

/* Change color on hover/mouse-over */
.navbar a:hover background-color: #ddd; /* Grey background color */
color: black; /* Black text color */
>

Content

Create a 2-column layout, divided into a «side content» and a «main content».

We use CSS Flexbox to handle the layout:

/* Ensure proper sizing */
* box-sizing: border-box;
>

/* Column container */
.row <
display: flex;
flex-wrap: wrap;
>

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side flex: 30%; /* Set the width of the sidebar */
background-color: #f1f1f1; /* Grey background color */
padding: 20px; /* Some padding */
>

/* Main column */
.main <
flex: 70%; /* Set the width of the main content */
background-color: white; /* White background color */
padding: 20px; /* Some padding */
>

Then add media queries to make the layout responsive. This will make sure that your website looks good on all devices (desktops, laptops, tablets and phones). Resize the browser window to see the result.

/* Responsive layout — when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) .row <
flex-direction: column;
>
>

/* Responsive layout — when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) .navbar a float: none;
width: 100%;
>
>

Tip: To create a different kind of layout, just change the flex width (but make sure that it adds up to 100%).

Tip: Do you wonder how the @media rule works? Read more about it in our CSS Media Queries chapter.

Tip: To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter.

What is box-sizing?

You can easily create three floating boxes side by side. However, when you add something that enlarges the width of each box (e.g. padding or borders), the box will break. The box-sizing property allows us to include the padding and border in the box’s total width (and height), making sure that the padding stays inside of the box and that it does not break.

You can read more about the box-sizing property in our CSS Box Sizing Tutorial.

Footer

At last, we will add a footer.

.footer <
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd; /* Grey background */
>

Congratulations! You have built a responsive website from scratch.

W3Schools Spaces

If you want to create your own website and host your .html files, try our website builder, called W3schools Spaces:

Источник