Theory
Theory
Comments

Let’s connect another frame to the page

Let’s summarize the main points.

You have completed Muffin’s assignment. Congratulations! You developed templates for the main and internal pages of the website. At the same time, you familiarized yourself with how to mark up HTML pages, and you studied the tags that are used to create the major structural blocks on these pages. In the following chapters, we will fill these templates with real content.

Let’s take another look at the result. The website blocks are displayed in the browser in the same order in which they were entered in the code, and they are shown one on top of the other in a single column.

But for the moment we are still designing the website, right? Therefore, we can rearrange the blocks and get an idea of how they will look in a different layout. It is CSS and not HTML that is responsible for determining the positioning of blocks in the browser. This division of functions is very convenient: we can experiment with the positioning of blocks and their appearance without changing the markup.

Later we will study CSS in more detail and learn about how we can control the appearance of page elements. For now, let’s simply link other styles to <head>. These styles describe a different page layout.

In this and subsequent chapters, you are able to download an archive with the current version of your layout. You can download it and see for yourself how everything is structured. Here is the link to the first intermediate version.

index.html

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="keywords" content="markup, HTML, CSS, blog"> <meta name="description" content="A blog about the process of learning web technologies"> <title>The website of a beginning coder</title> <link rel="stylesheet" href="outlines.css"> </head> <body> <header> <h1>The website of a beginning coder</h1> </header> <main> <nav> Navigation </nav> <section> <p>Greetings to everyone! Welcome to my first site. Up until just recently I had no idea what a coder does for a living, but now I have found interactive courses in HTML and CSS and I have set myself the goal of becoming one. I even was assigned an instructor, Muffin, who does not allow me to slack off and will track my progress.</p> <p>My first assignment is to keep a diary and honestly write about all of my accomplishments.</p> </section> <section> Skills section </section> </main> <footer> Website footer </footer> </body> </html>

Goalscompleted

Replace the address of the linked style file with outlines-alternate.css.

Let’s connect another frame to the page

Comments

Log in

Sign up

Restore access