Organize your files
Organize your things. If you have a big website with a lot of site, then you will be confused if you dont organize your things
Make a folder to keep things separated.
When naming your files, choose filenames that make sense and follow the rules below.
- Avoid character spaces in filenames
- Avoid special characters like ?, /, % and #
- Use proper suffixes - eg .jpg
- Use lowercase
- Keep filenames as short as possible
- An image named B21908.jpg doesn't give you any clue as to what's on it. If it is an image of a grey cat, name it something like grey-cat.jpg!
URL is a web address to your site.
Here is an example on an URL.
http/httpsis a protocol (the s in https means it is secure)
sub(or an other name)is the subdomain (if you want more that one website to your domain name)
exampleis the domain name
3000is a port name (local computer)
/resourceis a path to a file or image
?id=123is a query string that comes when working with a forms
#section-idis a fragment for an anchor
This might seems a bit hard to understand. Therefore can this example be better
httpsis the protocol
dominoeffektenis the domain name
/click.htmlis a path to a HTML file
#operatorsis a fragment for an anchor
What is HTML?
HTML stands for Hyper Text Markup Language. It is the standard markup languange for web pages.
HTML elements are the building blocks of HTML pages, and are represented by < > tags.
The browser window shows exactly the same content that you have made in you coding program.
HTML elements is a start tag <, a end tag > and the content in between
HTML is the skeleton. It provides the basic structure of sites.
CSS is the body. It is used to control the design of the site.
When we are making a webpage does it consits of some basic elements.
A visual strucure of a website structure look likes this:
A coded strucure of a website structure look likes this:
Doctype stands for Document Type declation or doctype. It tells the browser what type of document.
Is the root element of an HTML page.
The head section is a container for metadata (data about data).
The meta tag defines metadata about the HTML document. The meta tag always go inside the
head element, and are typically used to specify character set, page description and viewport settings. Metadata will not be displayed on the page, but is machine parsable.
Specifies a title for the document. It must be placed after the meta charset tag.
Contains the visible page content on the site
Make a commet to your code that will not visible in the user's browser
A webpage is all about boxes, with alot of content. When you see a website there are often a lot of text, and pictures, but in the back there are a lot of boxes with the text, so we can place the elements in relation to other elements.
In HTML there are two types of boxes used to group pices of content. There are the semantic ones and the non-semantic ones.
Non-semantic elements like a div element, does not give the browser any clue of what the content in them are. They are like moving boxes with no description
The most commen non-semantic elements are:
Semantic elements are elements with a meaning. They are moving boxes with a description. In that way the browser know what the content in them are.
The most commen semantic elements are:
But why use them?
header element are used for introduction content or a navigation.
It often contains:
- one or more heading elements
- a logo or icon
- authorship information
nav element defines the main navigation links. It represents a group of navigation links. The most commen use for nav will be for wrapping an unordered list of links
main element specifies the main content of a document. It is normallye a sibling to the header and footer elements.
The semantic tag
section defines a section on the web page. It often have a heading and one or more paragraphs.
It often contains:
- indvidual sections of tabbed interface
- segments of the page fx an "About" page could have a secetion for the campany's history, a section for its mission statement and a section for its team
- different parts of a lengthy "terms of service" page
article tag specifies independent, self-contained content.
It is often uses for
- Forum post
- Blog post
- Newspaper article
footer element defines a footer for a document or section. the position of the element are normally at the end of a section, or bottom of a page.
It often have informations about
- authorship & copyright information
- contact information
- back to top links
- related documents
How add a CSS file
We have talked about how a website should be build, but if we want it to be pretty do we need to add a CSS file
<link href="../css/stylesheet.css" rel="stylesheet" type="text/css">