SCD - 1.3.3 HTML

?

Parts of HTML

Used for creating the content in a web page

Uses <tags> to govern how to present sections of content

  • <html> - Specifies the file is html
  • <head> - contains initial information about the page e.g. title, links to style sheets, JS styles, this is all called metadata (keywords are included here)
  • <body> - contains the page content
  • <p></p> - defines new blocks (paragraphs) of content by creating a new line
  • <ol> - ordered lists are numbered lists
  • <ul> - unordered lists are bullet lists
  • <h1> - creates a new heading
  • <div> - can be used to tidy blocks of html by encapsulating parts of the body within it which can then be styled using CSS

HTML defines the page content and structure e.g. name and size of an image

Tags can be given ID's e.g. <h1 id="page"> to apply a CSS style to a particular part of the page

1 of 8

Applying CSS

Used to define page styles and appearance (font, colour, boarders, shading)

Can be embedded inline into html without a seperate style sheet  - 

  • <h2> ß Example of CSS being used for a single occourance of a <h2> size header

Using an external sheet means that you can link one style to a particular tag or id accross the web page

Syntax - {color: red} - Can also use hex codes for colours in the formal #REDGREENBLUE e.g. #00FF00 is solid green

To link an external CSS file a <link> tag sits in the head of the html file - <link href="Styles.css" rel="stylesheet" type="text/css">

Borders - Can have colour, style and width can be defined (an invisible border has width 0px, style :none), Padding is used as the space between the content and the border

2 of 8

CSS - Classes, Identifiers,

A unique identifier can be defined and given a set of style attributes and applied to a div block


In the HTML file the opening <div> tag can be appended to include the unique CSS identidier  (<div id="page")

  • #Identifiers - Unique to one element per web page
  • .Classes - Can identifiy more than one element per page (if different div blocks are given the same styles) - e.g. .list applies to all lists
  • Objects using <div> can be moved around e.g. in the css if width: 350px:, text-align: left; is used then everything is shifted to the left of the page and has a width of 350 px
  • Floated objects ^ do not add to the hight of the divider and so they need to be cleared to appear to fill the entire content area which is done by: <div></div> at the end of your html body
3 of 8

Web forms

<forrm></form> tags can be used to create web forms

  • Validated using JavaScript and styled using CSS
  • Can be used to input types and names
  • Submit and reset buttons

Forms have specific type attributes

4 of 8

JavaScript

Used to add functionality, interactivity and programs the behaviour of web pages


Interpreted language so it uses an interpreter as an executable file is not what is needed, rather a line-by-line basis

JS allows web features to be implemented simply and allows complex tasks to be performed easily, enabling dynamic and interative activities to web pages

Features include - drawing and animations, manipulation of HTML elements, navigation tools, web form validation before transmission, fully featured web apps e.g. Netflix

5 of 8

JavaScript - Code Structures

JS can be embedded within a web page using the  <script> tag in the head or within external script files linked to the HTML file

JS allows data to be processed on the user's mahcine as it is entered, e.g. validating data, animating object, prodiving inbterativity and only onced processed it is passed onto a server

By processing data locally it means that less rubbish data is sent to the server as it is validated before being sent off which also keeps the website running fast as traffic will be reduced

In forms <input> controls add textboxes which allows the user to enter data

Variables are assigned using the syntax - var x = document.getElementbyId("box");

In the examle above, x is the variable, the value for which is in the element box, this allos us to address the element in box in JS simply as the variable 'x;

the function can be used to change HTML elements within the box e.g. x.style.fontSize= "30px"; x.style.color = "blue" changes the font size to 30px and the colour to blue within that box

6 of 8

JavaScript - Functions

Functions in JS use the syntax - function myFunction() { }

Functions can be called by using the onClick action of a button meaning that everytime the button is clicked then the function will be called e.g. 

  • <button type="button"
  • onclick="myFunction()"> Click me!</button>

Alert boxes can be used to easily make sure that information is conveyed to the user and it also asks for confirmation before the user can continue- alert("Hello")

JS can also read and use user input from forms: <input type="text" name="answer": <br><br> and then using if statements to see if the answer is correct or empty to then give a response

Text can be written to a file using the command - document.write("TEXT TO BE WRITTEN") (HTML elements can also be written by putting the tags in brackets using the same command (<h1> text </h1>)

  • This is only used for testing as it will delete the entire content of a HTML document after executed so it is avoided being used as part of a function
7 of 8

JavaScript - Arrays

Arrays in JS are similar to that of Python arrays, they can store multiple pieces of data unmder a single variable assignment

The syntax of an array looks like this:

8 of 8

Comments

SarahEmi45

Report

This is a nice resource for me. 

Similar Computing resources:

See all Computing resources »See all Software resources »