Webpage structure
Structuring a webpage is similar to structuring a text document. When structuring a text document you would use different size heading and subheadings to help guide the reader through the text. Same goes when structuring a website, you would use pictures and different size headings to create flow and structure. Structure is just as important in your code to allow your code to be readable and proficient.
Structure of code
- common tags
<p></p><body></body><html></html>- attributes (tell us more content about an element)
<p lang="en-us">
Extra markups
<!DOCTYPE html>
- Tells the browser which version of html you are using
<!-- -->
- Use this to add comments in a html document that is not seen on the webpage
<p id="identifier">
- IDs are used to separate element that you would like to add styles to so it stands out from other identical elements
<p class="identifier">
- Class identifiers are similar to ID identifiers expect you use class to identify multiple elements
Block elements
- block elements start a new line on the webpage
Examples
<h1> <p> <li>
Inline elements
- elements that stay in the same line of code
<b> <a> <img>
Div tags
<div></div>- use when you need to group multiple elements
Span tag
<span></span>- acts similar to DIV except used for inline elements
META tag
- lives in the head of your webpage and gives information about the web page such as description, keywords, robots, author, pragma, and expires
Who is the site for?
When creating a website you should always ask yourself, who is the website for? knowing who you are targeting is a huge first step when deciding everything from content layout to colors. After you know your audience you need to figure out why they are visiting your site and what are they trying to achieve. Next step is the figure out what information your visitors are looking for and how do you display it in the most efficient way possible.
Site maps and wireframes are awesome tools to help lay out the most efficient webpage for your visitors.
Site map
- helps layout the entire webpage for what content should go where
Wireframe
- layout of individual page
Basics of Javascript
Javascript works with a webpage to give the user an interactive experience. With Javascript you are able to add and move around content of a webpage.
Javascript Vocab
object
- javascript can use physical things as object
Properties
- each object has a set of properties
Events
- When interacting with the objects it causes events
Methods
- how to object will be interacted with