Welcome to Our Website!

Our names are Owen and Arya

This a test website made to help you make your own!

How to make a Website!

(Remember this: the definition of elements which is a word we'll be using a lot throughout is page means according to W3Schools.com! "An HTML element is defined by a start tag, some content, and an end tag").

First you must type in this code into a app called notepad (it comes pre-installed on windows computers)
 !DOCTYPE html
html
body

h1 My First Heading/h1

p My first paragraph./p

/body
/html
NOTE that before continuing you must add angle brackets on each side of p,h1,body,!DOCTYPEhtml and html like this <>.

if you want to add more paragraphs or headers you have to put ( with angle brackets on each side) p to start it and /p to end it just put your text in the middle and for headers it's h1 to start it /h1 to end it, see a pattern (for end tags)?
One reminder that all of the writing code must be done inbetween body and /body. Remember that your paragraphs code MUST be in chronological order ( one after the other in order) that you want it to be in.

!DOCTYPE html tells the code editor what type of document this is.

Lists

• if you want to make a list
• you must type ul (with angle brackets on each side)
• then for each bullet and sentence after you have to type li (in angle brackets) then put your sentence and put /li
• after you're done your list type /ul at the bottom
• then you get this.

1. but if you want a numbered list
2. replace ul with ol and do same things

Stylesheets

Now if you want to change the colour of the back ground, add a border or margin and change font or text colour or size
 you will need something called a 
"stylesheet", basically what this is, is a separate file in a coding language called css (cascading StyleSheets). 
For this one in particular it is called an external 
stylesheet meaning that it is in another file. make the code and press "save as" name it mystyle.css (.css is very important)
 then set it from txt to all files and 
make sure it says UTF-8. 
Now you have to link the two by typing this in (with angle brackets) 
link type="text/css" rel="stylesheet"href="css/Mystyle.css"/.

for the code for my style sheet it's like this (REMEMBER THE STYLESHEET CAN NOT CONTAIN HTML ONLY 
CSS SO NO <>)  
body {
background-color: orange;
font-family: verdana;
text-align: left;
}

h1{
text-align: center;
}

h2{
text-align: center;
}

p{
font-size: 120%;
font-family: cursive;
}

ul{
text-align: left;
font-size: 120%;
font-family: cursive;
}

pre{
font-family:cursive;
font-size: 120%;
}

ol{
text-align: left;
font-size: 120%;
font-family: cursive;
}

div{
width: 1366px;
border: 30px solid red;
border-image: linear-gradient(to bottom, red, yellow, green, blue, indigo, purple) 1;
padding: 50px;
margin: 15px;
}
each of those lines of code in between the curly brackets are called declarations and they must always have this at the end ;.

The (<)class(>) element

The class element is a line of code you can put into other elements like (<)div(>) and (<)span(>) which looks like this: (<)div class="placeholder"(>), then you can go to your stylesheet and type .placeholder or what ever class you named it and you can edit the content inside individually apart from everything outside the class like this:
.placeholder
{
text-color: red;
}.

Other useful elements!

• The (<)span(>) element you can wrap it around text or around parts of text like this: (<)p(>)Placeholder(<)span style="color: blue"(>)Your text() placeholder(<)/p(>) (it's the reason some of the words on the list below are different colours)


• The (<)br(>) element you can use it in text or other places to force a line break (the reason there are spaces inbetween the list bullets are because I put (<)br(>) inbetween the (<)li(>) elements)


• The (<)hr(>) element you can use it to make a line to separate content as seen above the "How To Make a Website" heading


• The (<)b(>) (<)/b(>) and (<)strong(>) (<)/strong(>) elements the (<)b(>) and (<)strong(>) elements make words bold or strong like in the start of this sentence, you have to wrap the start and end tags around the text you want to make strong or bold


• The (<)pre(>) element is like the (<)p(>) element which but instead of automatically formatting it together it instead retains the format on how you put it in the code

Tips to remember!

• All spellings must be in American so that means "color" not "colour"


• Remember to add an ; at the end of every declaration


• The thing you have to put like .css or .html after the file name is called the file extension, this is really important because it tells the computer what code you're using.


• If something doesn't work look closely for errors in the code, don't just get up and quit!

Putting your website well, on the web

To put your website on the web you must find a domain host like squarespace to buy a domain name. Like I said you must BUY a domain name meaning you have to pay a yearly fee to keep it online.