html basics

HTML Basics

Have to start each document with what type of code to useLine 1 is always <!DOCTYPE ...>Where the ... is the type of code being usedIn addition to this on the second and last line have to put in the command <html> and </html> to show the start and end of a document respectively

1. <!DOCTYPE html>2. <html>3.4.5. </html

This inside <> are called tags and are generally paired upThe file is broken into 2 parts: The Head and the Body, both of these are detailed with tabs

1. <!Doctype html>2. <html>3. <head>4. <title>5. </title>6. <head>7. <body>8. </body>9. <html>

The head includes information about the webpage Have the title tag which gives the webpage it’s title that will appear in the tab

The body contains what will appear on the webpage itself Denote Headings by <hi> and <hi> Where i=1,2,3,4,5,6 where lower the number the

larger the font Denote paragraphs by <p> and </p> Insert images by url with <img src=”url” /> Insert hyperlinks with <a href=”url”> around the chosen hyperlink and closing with

</a> Ordered list <ol>, </ol> is a list ordered 1,2,3... and each element in the list is coded

with <li> as the tags Unordered list <ul>,</ul> is an unordered list and each element is coded with <li> tag Can put lists inside list by just inserting new tags inside the active ones Can change the appearance of font with ‘style’ command, use <p style=”command”>

o The commands are: Font-size:Xpx Color:’color desired’ Font-family:’font desired’ Text-align:”left/right/center”

o If you are unsure if a quality exists and want to put up substitute list the most desired quality and follow it with a comma and the then the back up quality

Can change the background colour of different parts of the code with the style function using “background-color:” which will affect the part of the document between the tags

Make a word bold with <strong> Make a word italicised with <em>

When writing the html code indent each pair of tags

of 4/tt/file_convert/577cc79f1a28aba711a17de9/document.docx

TablesStart and end a table with the <table>Define each table row with <tr></tr>Add columns in each row with <td></td>Can split tables up into head and body with <thead> and <tbody>Can add headings into <tr> with <th></th> as a heading commandCan insert pictures and links into individual cellsTable styling

Can set the width of column elements with colspan=”X” inside the <tr> tag Can set border thickness with border=”Xpx” inside tags Can style border with border:Xpx (dashed/solid) “colour” can define different borders

for each cell with border-(edge)DivCan split the body of the code into different sections using <div></div> this enables different styling for different parts of the body- can use style on this for dimension and colors etcThese can be made into links wrappin with <a href=”url”>, </a>SpanAllows for styling smaller parts of the document, everything enclosed by span is effected by the commandClassesAllows for specifically css’ing of a class of tags eg all the < p class=”xxx”>Allocate a tag a class with < class=”id”> which is related to the css by .idIDAllows for the styling of 1 exact element <div id=”xxx> changes that 1 set of tags onlyRepresented in css by #xxxCSSThis is a way of styling the page without putting lots of code into the html doc and without having to apply the styling to each individual elemtnNeed to link html doc to css doc use <link type="text/css" rel="stylesheet" href="stylesheet.css"/> where type is what type of link being used, rel is relative to which document and href sets up the link to that document and it’s formatPseudo class selectorsIs a way of accessing HTML items that aren't part of the document tree.For instance, it's very easy to see where a link is in the tree. But where would you find information about whether a link had been clicked on or not? PCS allows to style these kinds of changes in our HTML document.Can change visuals for before clicking, after clicking and while hovering over:

A:link- an unvisited link A:visited- a visited link A:hover – while hover over the link with the mouse A:first-child – affects only the first child not sibling elements aswell A:nth-child(n) – as previous however it picks the nth child rather than the 1st

DisplayThis command allows you to dictate how different HTML elements are positioned relative to each other

Block – makes the element a block box takes up the whole width of the page so next element gets placed below

Inline-block – makes the element a block box but does not take up the entire line so elements can go next to it


Inline – doesn’t format as a block and the element will sit on the same line as another element taking up as much width as it needs rather than whole line – better suited to elements that a blocks by default such as headers or paragraphs

None – makes the element and its content disappear from the page, this includes children aswell

The box model

This represents how you can set up each element within the body of the script and its properties with regards to its neighbouring featuresMarginThis moves the element relative to nearby elements and relative to the documents ‘walls’

Auto- automatically puts equal left and right margins so centres the pageCan specify particular margin with margin-“position”:Can specify all margins in turn in 1 command: margin: /*some value*/ going clockwise from the top, listing multiple values affects each individual margin in turnValues in margin effectively just move element that many pixels in the opposite directionThis means can use negative values to move element in that directionBorderPuts a border around the element and can be changed with css as standardPaddingDistance between border and innermost layer(actual content)Is encoded in the same way as marginsFloatWhen you float an element on the page, you're telling the webpage: "I'm about to tell you where to put this element, but you have to put it into the flow of other elements." This means that if you have several elements all floating, they all know the others are there and don't land on top of each other.If an element does not have the float command then other elements may end up in a position where they obstruct it. Using clear:“left/right/both” moves the element to immediately below the elements in the float either StaticThis positions the element where it would normally go, this is the default setting for positioningAbsolute positioningAn element with this positioning will be positioned relative to the first parent element that does not have position static, if there is no such element it gets positioned relative to <html>

Relative positioningTells the element to move relevant to which it would go if it was default positioning


If a relative positioning element is given a margin then it moves relative to where it would originally have beenFixed positioningThis fixdies the element relative to the browser screen, so as the page is scrolled up and down this element will stay fixedGrid layout


html basics

Documents