Building a Static Website from Scratch-HTML and CSS in Action[/s]

In this post, we will discuss how to create a static website from scratch using HTML and CSS. A static website is a simple website that consists of HTML, CSS, and JavaScript files. These files are served to a user’s web browser, which then renders the website. Unlike dynamic websites, which require a server-side scripting language like PHP to generate content on-the-fly, static websites are pre-built and do not change unless the content is updated manually.

To create a static website, we’ll need two main technologies: HTML and CSS. HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. It provides the basic structure and content of a web page, while CSS (Cascading Style Sheets) is used to style and layout the content.

Let’s start by creating the basic structure of our website using HTML. Open a text editor and create a new file called `index.html`. Add the following code to set up the basic structure of an HTML document:

“`html










“`

This code sets up a basic HTML document with a `head` section containing meta information and a link to an external CSS file, and a `body` section where we’ll add our main content.

Next, let’s add some content to our website. For now, let’s keep it simple and add a heading, a paragraph, and an image. Replace the comment `` with the following code:

“`html

“`

This code adds a heading, a paragraph, and an image to our website. The `img` tag is used to display an image, and the `src` attribute specifies the path to the image file (in this case, `image.jpg`). The `alt` attribute provides alternative text for the image, which is displayed if the image cannot be loaded.

Now that we have our basic content, let’s style it using CSS. Create a new file called `styles.css` in the same directory as your `index.html` file, and add the following code:

“`css
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}

.header {
text-align: center;
padding: 2rem;
}

h1 {
font-size: 2.5rem;
color: #333;
}

p {
font-size: 1.5rem;
color: #666;
}

img {
max-width: 100%;
height: auto;
}
“`

This CSS code sets the font family for the body of the document, adjusts the line height, removes any margin or padding around the content, centers the header text, and styles the heading and paragraph elements. It also adds some basic styling to the image.

And that’s it! You’ve just created a simple static website using HTML and CSS. Of course, this is just the beginning. There’s so much more you can do with web development, including adding interactivity with JavaScript, creating more complex layouts with CSS frameworks, and building dynamic websites with server-side scripting languages. But for now, enjoy your new static website.