HTML WEB DESIGN

 

separator-blank.png

 

GUIDE – WEBSITE STRUCTURE DIAGRAM

 

  • Websites can consists of many files and it can get very confusing how they are connected together.

    To help keep us organized, we can create a website diagram that shows all html documents and how they link to one another.


Let’s create a website structure diagram for our site so far:

 


Notice that there are no arrows going to/from webpage3.html.  So there is no way to navigate to it from the index page.  We need to add it to the site!

  • Open index.html in a text editor and add a link to webpage3.html.  Try to do this without looking below.

 

 

<html>

<head>

</head>

<body>

<b><h1>My Site</h1></b>

 

<a href="webpage1.html">Page #1</a> |

<a href="webpage2.html">Page #2</a> |

<a href="webpage3.html">Page #3</a> |

<a href="https://www.tsn.ca/">TSN</a> |

<a href="https://www.cbc.ca/news">CBC News</a> |

<a href="https://slashdot.org/">Slashdot</a>

</body>

</html>

 

 

 

  •  Here is what our updated website structure diagram looks like: