Skip to content

Latest commit

 

History

History
97 lines (68 loc) · 5.33 KB

class02.md

File metadata and controls

97 lines (68 loc) · 5.33 KB

HTML & CSS

HTML Layout

For a long time, web page authors used

elements to group together related elements on the page (such as the elements that form a header, an article, footer or sidebar). Authors used class or id attributes to indicate the role of the
element in the structure of the page.

HTML Structure

HTML is a markup language that defines the structure of your content.

HTML elements are the building blocks of HTML pages.

  • declaration defines this document to be HTML5 element is the root element of an HTML page
  • The lang attribute defines the language of the document
  • The element contains meta information about the document
  • The <title> element specifies a title for the document element contains the visible page content

HTML Extra Markup

  • What is an HTML Element? An HTML element is defined by a start tag, some content, and an end tag:

The main elements to access web:

  • Web Browser
  • Web server
  • Screeen Reader

What is CSS?

CSS stands for Cascading Style Sheets CSS describes how HTML elements are to be displayed on screen, paper, or in other media CSS saves a lot of work. It can control the layout of multiple web pages all at once External stylesheets are stored in CSS files

How the web works:

When you visit a website, the web server hosting that site could be anywhere in the world. In order for you to find the location of the web server, your browser will first connect to a Domain Name System (DNS) server.

  • Some Important Tag Elements:

    • The <html> element is the root element of an HTML page.
    • The <head> element contains meta information about the HTML page.
    • The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
    • The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
    • The <h1> element defines a large heading.
    • The <p> element defines a paragraph.

New HTML5 Layout Elements

HTML5 introduces a new set of elements that allow you to divide up the parts of a page. The names of these elements indicate the kind of content you will find in them. They are still subject to change, but that has not stopped many web page authors using them already.

i.g:

etc.

Process & Design

Html uses elements to describe the structure of pages Tags act like containers. They tell you something about the information that lies between their opening and closing tags.

Attributes tell us more about eLements:

Attributes provide additional information about the contents of an element. They appear on the opening tag of the element and are made up of two parts: a name and a value, separated by an equals sign.

HTML5 allows you to use uppercase attribute names and omit the quotemarks, but this is not recommended.

Forms:

Whenever you want to collect information from Xvisitors you will need a form, which lives inside a

element.Information from a form is sent in name/value pairs.XEach form control is given a name, and the text the Xuser types in or the values of the options they select are sent to the server.HTML5 introduces new form elements which make it Xeasier for visitors to fill in forms.

Images:

You can specify the dimensions of images using CSS. XThis is very helpful when you use the same sized images on several pages of your site.Images can be aligned both horizontally and vertically Xusing CSS.You can use a background image behind the box Xcreated by any element on a page. Background images can appear just once or be Xrepeated across the background of the box.You can create image rollover effects by moving the Xbackground position of an image.To reduce the number of images your browser has to Xload, you can create image sprites.

JAVASCRIPT IN THE BROWSER:

Defining functions:

JavaScript functions are defined with the function keyword. It can be used as a function declaration or a function expression. The construction of the function:

Being able to change the content of an HTML page while it is loaded in the browser is very powerful. The examples below rely on the ability to:

  • Access the content of the page
  • Modify t he content of the page
  • Program rules or instructions the browser can follow
  • React to events triggered by the user or browser

What is a script and how do I create one?

A script is a series of instructions that a computer can follow to achieve a goal.

How do computers fit in with the world around them?

To write a script, you need to first state your goal and then list the tasks that need to be completed in order to achieve it.

How do I write a script for a web page?

you need to Start with the big picture of what you want to achieve, and break that down into smaller steps.

How A browser sees a web page:

In order to understand how you can change the content of an HTML page using JavaScript, you need to know how a browser interprets the HTML code and applies styling to it.

  1. receive a page as HTML code.
  2. create a model of the page and store it in memory.
  3. use a rendering engine to show the page screen.

Designing A Script tasks:

Once you know the goal of your script, you can work out the individual tasks needed to achieve it.This high-level view of the tasks can be represented using a flowchart.