Today I attended a session to learn how hand- code a website from scratch. Here are my notes:
Website Architecture
Save all HTML, CSS & Images into one file together. Linking between them works only in the same directory.
Create a .html file & .css file.
HTML: 4 essential divs:
<!DOCTYPE html> comes at the beginning. Doesn’t have a closing <>
<html> </html> comes after but goes around everything that comes after
<head></head> contains metadata that isnt going to show on the page.
<body></body> this is where the magic happens.
Link from HTML to CSS in the head:
<link rel= “stylesheet” type=”text/css” href=“whatever you named the style sheet as.css” >
This means that the html page will refer to that specific style sheet for constructing the page.
In CSS, strip away the automatic formatting of browsers with c&p code from
https://meyerweb.com/eric/tools/css/reset/
Divs
There are now specialized Divs:
<header> <nav> <article> <section>
You can still make regular Divs in HTML:
Defining a class gives the Div a specific name. you can then use the name you give it to refer to it in CSS.
Altering in css
.divname {text-align: center; max-width: 900px; margin:0 auto; }
When using a user defined name for your div, put a dot before it in CSS. If it’s a built in Div or tag, you don’t need it.
Image sourcing in html:
You can imbed an image (saved in your site architecture) like so;
<ing src= “File_from_site_arch.png” alt= “some text for the blind” >
HTML tags
<h1> tags are of course headers </h>
<p> are for paragraphs </p>
Adding colour in CSS
body { background-color: #B3B6B7;}
https://htmlcolorcodes.com <– you can get hex codes from a color picker here.
You can also use the names of basic colours such as black, white, orange, pink or whatever.
making a div stretch the height of the page:
To make a div stretch the entire hight of the page, you need to apply this funtion not just to the div in question but to the HTML div itself also. This is weird and possibly a bug but its how It works.
Eg: body, html {height:100%;}
Specifiying special divs
You can give section divs a class so you can speak to specific section divs directly rather than all section divs on a html page. (section divs are a kind of built in div)
Eg: <section class=”divname”> </section>
Aligning text within a div in CSS
.divname{align-text:left; }
Inserting Fonts
can import fonts from this website that’ll work on most devices.
stick a link to it in the HTML’s head
Eg: <link href=”https://fonts.googleapis.com/css?family=Martel:300” rel=”stylesheet”>
specify where its used in CSS. for example, if you want to apply a font to your h1:
h1 { font-family: “Martel”, sans-serif; }
The google site gives you the appropriate things to just paste in.
Other font modifiers: font-size:10px; line-height: 20px; color:#FFFF
Padding
This creates space around inside of div, around content.
You define the pix around each side clockwise starting from the top. Ie padding:top right bottom left;
Eg: h1{ padding: 0 10px 0 10px;}
When its zero, you don’t need px. Also note the lack of comma between values. This aint python, punk.
Mouse rollover effect
In HTML in image source add onmouseover=“ “this.src= ‘nameofanotherfile.png’”
To change back after add onmouseout=“this.src=theoriginalfilename.png”
Eg: <img src= “pic1-off.png” onmouseover=”this.src=’pic1-over.png'” onmouseout=”this.src=’pic1-off.png'” alt=”image one”>
Floats
Lifts an element out of the normal document flow, allows other elements to “float around it” in CSS
In its simplest use, the float property can be used to wrap text around images.
Eg: .somediv{float: left;}
if you want a section to ignore a float, add a div class= clear, then on css .clear{ clear: both; }
This will add a div that after everythign will ignore the floating element.
Adding a Navigation bar.
<nav> creates a div in the place you’d expect a navigation bar . </nav>
<ul> creates an unordered list (i.e. bullet points rather than numbered. each individual item on the list gets the <li> list div </li>
this will create a vertical list on the page. to change it to a line, on CSS:
nav ul li { display:inline; }
Here, CSS takes the nav, unordered list, list item as an argument. This Is how we specify particular elements within CSS.
Adding a hyperlink to text
“a tags” are how we create hyperlinks from a webpage and are handled with the following code in HTML:
<a href= “www.theplaceyouwanttolinkto.com”>Text that will be a hyperlink</a>
Changing background and text colour on a mouse hover over links in CSS:
a:hover{ }
this will change things in the div of all A links, but you can be more specific to divs for example:
nav ui li a:hover{ background-color: pink; color: orange; }
this will change the colour of specifically the div and text colour for the links in the nav bar.
Billy Barnes 