Peter: Created page with "You can use a table or floats to structure your web pages == Basic web page structure == {| class="wikitable" ! style="text-align: center;" | Position ! style="text-align: center;" | Content |- | style="text-align: center;" | Header | style="text-align: center;" | Logo |- | style="text-align: center;" | Left hand side | style="text-align: center;" | Navigation table |- | style="text-align: center;" | Center | style="text-ali..."

2023-11-25T18:44:01Z

Created page with "You can use a table or floats to structure your web pages == Basic web page structure == {| class="wikitable" ! style="text-align: center;" | Position ! style="text-align: center;" | Content |- | style="text-align: center;" | Header | style="text-align: center;" | Logo |- | style="text-align: center;" | Left hand side | style="text-align: center;" | Navigation table |- | style="text-align: center;" | Center | style="text-ali..."

New page

You can use a table or [[float]]s to structure your [[web page]]s

== Basic web page structure ==

{| class="wikitable"
! style="text-align: center;" | Position
! style="text-align: center;" | Content
|-
| style="text-align: center;" | [[Header]]
| style="text-align: center;" | [[Logo]]
|-
| style="text-align: center;" | [[Navigation table|Left hand side]]
| style="text-align: center;" | [[Navigation table]]
|-
| style="text-align: center;" | [[Center]]
| style="text-align: center;" | Each web page has a different [[center]]
|-
| style="text-align: center;" | [[Collaboration|Right hand side]]
| style="text-align: center;" | Three sets of [[collaboration]] links
|-
| style="text-align: center;" | [[Footer]]
| style="text-align: center;" | See [[footer]] for details of footer table
|}

Up until now, I have shown you how to use a full page table to set this structure and most of us have managed rather well to get this basic tructure to work, even using this as the basic structure of your [[2020-05-12|1st design brief]]

== Tables or old-school! ==

Using a [https://www.w3schools.com/html/html_tables.asp table] to structure your web page is not good practice- there are better ways to layout the structure of your web page. However, by concentrating on the way a simply table works, you are programming your brain to see the layers of coding used in HTML!- everything about tags inside tags inside tags inside tags, that is so important to become comfortable with

=== For example ===

<pre>
Inside the html and /html tags you have body and /body taga
Inside the body and /body tags you have table and /table tags
Inside the table and /table tags you have tr and /tr tags (a row of the table)
Inside the tr and /tr tags you have td and /td tags (the data cells of a table row)
Inside the td and /td tags could have table and /table tags (a table in a table!)
</pre>

It's all about [https://www.w3schools.com/html/html_elements.asp nexting]! (see more on [https://en.wikipedia.org/wiki/Nesting_(computing) Wikipedia])

=== A better way to layout a web page ===

For now, I'm just going to give you one word : [[Float]]s

== Notes ==

This structure must be replicated consistently across all your [[web page]]s

<small>
[[Main Page]] |
[[Basic web design]] |
[[navigation table|Navigation]] |
[[Ranking]] |
[[support website|Support]] |
[http://www.asterix.co.za/ Asterix Home]
</small>

[[Category:Design]]

Main page table - Revision history