Google+ logo Twitter logo Youtube logo

Building the basic HTML structure


Building the basic HTML structure

We just defined the structure of the website. Now we're going to build the structure in actual HTML.

Defining the website-structure is nothing more or less then splitting up the page in sections.

We just saw that the example contains three blocks; header, menu and content.
Do you remember what a DIV is? A "section" of "block"! So: we're gonna create thee div's. For these blocks we're going to define a unique id for each one of them. Because it's handy to define logic and relevant ID-names we're going to name these: header, menu and content. This could look like this;

<div id="header">
	This is the header!
</div>
<div id="menu">
	This is the menu!
</div>
<div id="content">
	This is a section for actual information / content!
</div>

Like we have learned before we also need to create some basic HTML tags: <html>, <head> and <body>. These basic-tags will be merged with our example before, like this;
<html>
<head>
	<title>A website with three blocks!</title>
</head>
<body>
	<div id="header">
		This is the header!
	</div>
	<div id="menu">
		This is the menu!
	</div>
	<div id="content">
		This is a section for actual information / content!
	</div>
</body>
</html>

Now we have defined and created the HTML structure, we can style it.


Comments (15) Post comment

  • Direct url TjaKW (June 1, 2021 @ 12:39)
    Medicine information. What side effects can this medication cause? \r\n<a href=\"https://lamictal4u.top\">how to buy lamictal prices</a> in the USA \r\nEverything trends of medicament. Get now.
  • Direct url BjpTQ (May 17, 2021 @ 08:42)
    cialis coupon cvs <a href=\"https://topcialistabs.com/\">cialis no prescription</a> cialis goodrx
  • Direct url JeuGM (May 16, 2021 @ 07:18)
    womens viagra <a href=\"https://sildenafilviagratop.com\">herb viagra for sale</a> sildenafil 100
  • Direct url VlhEE (May 16, 2021 @ 05:55)
    cialis logo <a href=\"https://cialisortadalafil.com/\">canadian cialis</a> free cialis
  • Direct url WcrYE (May 14, 2021 @ 08:58)
    sildenafil price <a href=\"https://edviagramaster.net/\">viagra connect cvs</a> viagra para mujeres
  • Direct url IpeBD (May 13, 2021 @ 10:44)
    teaching cover letter <a href=\"https://writingacoverletteronline.com/\">web site</a> caregiver resume
  • Direct url Kathrynpem (May 12, 2021 @ 21:37)
    free cialis samples <a href=\"http://tadalafilled.com/\">tadalafil cost</a> buy cialis generic
  • Direct url CaoUQ (May 12, 2021 @ 16:06)
    cover letter opening <a href=\"http://coverletterforresumetop.com/\">education resume</a> college graduate resume
  • Direct url Martinapiepe (May 8, 2021 @ 03:53)
    viagra spider <a href=\"https://mysildenafilkr.com/\">viagra history</a> sildenafil 50mg
  • Direct url Francesisoft (May 7, 2021 @ 14:39)
    viagra from india <a href=\"https://mrviagrashop.com\">where to buy viagra</a> over the counter sildenafil
  • Direct url Rebeccagiz (May 7, 2021 @ 06:01)
    essay writing service writers <a href=\"http://writemyessayslfd.com/\">writing college essays for money</a> what should you do when writing an analytical essay
  • Direct url StellaAnach (May 5, 2021 @ 20:21)
    how to write a body paragraph for an essay <a href=\"https://topessaywriterfas.com/\">essay helper online</a> write rhetorical analysis essay
  • Direct url TiffanyNon (May 4, 2021 @ 03:47)
    best time to take cialis <a href=\"https://toptadalafiltabs.com/\">tadalafil from india</a> cialis for bph insurance coverage
  • Direct url JaniceCak (April 30, 2021 @ 15:50)
    cialis super active <a href=\"https://mycialistabs.com/\">cialis 5mg</a> cialis copay card
  • Direct url FxmWU (April 28, 2021 @ 20:38)
    Pills prescribing information. Brand names. \r\n<a href=\"https://topregabalin.top\">generic for lyrica</a> in USA \r\nEverything trends of drug. Read information now.

Leave a comment ...

Name (will be visible)
E-mailaddress (will not be shown)
Comment
Type the code illustrated below

Back to top