IT training 88 slides

HTML5 and CSS3 The Theory HTML5 !DOCTYPE !DOCTYPE !DOCTYPE must be the first thing in a HTML document (you can not put it at any point below) This is not a HTML tag; it is an instruction to the browser informing it which version of HTML the page is written in Always try and use so that the browser knows what type of document it is HTML, HEAD and BODY HTML HTML Tag tells the browser that this is a HTML document HTML is the beginning and end tags in a HTML page It signifies that between its tags is HTML content - It is the container for all HTML content except the !DOCTYPE Head Defines the Head element part of the HTML Page Head is the container for all the HTML page head elements It can include page elements such as the page title, scripts, styles, meta information and much more Body The body tag defines the body element of the HTML document Within the body tags; all HTML content is written and includes things such as text, hyperlinks, images, tables, lists, etc and all other elements that make up the page Header, Footer and Section Header Represents a container for introductory content and/or navigation menus Typically it may contain one or more heading elements, logos, icons, menus, etc Before HTML5; designers would use a Div to section off the header Font-Family and FontWeight Font-Family Used to specify the font property for an element Is used to change the font used on the element it is used in It can hold several font names as a fallback so that if the browser does not support the first; it will try the next font Font-Weight Used to set how think or thin characters in the font should be displayed Used, as example, to set bold fonts Text-Align and TextDecoration Text-Align Used to specify the horizontal alignment property of the text Allows us to set text to be either center, left or right in the element it is set in Text-Decoration Text-decoration property allows the specification of particular decoration to be added to text Used to set text to be underlined, line-through, etc Can also be used to set to none; for example when wanting to remove the underline from a hyperlink List-Style List-Style This property will set all the list properties in one declaration Properties that can be set are list-style-type, list-style-position and list-style-image Can also be set to none to remove any styling Border and BorderRadius Border Used to set the border properties in one declaration Can set the border-width, border-style and border-color You can set all or just if desire Border-Radius Used to set the radius properties of the border We use this property to set rounded border corners by passing in a value in pixels Box-Shadow Box-Shadow Used to attach one or more shadows to an element Values passed in refer to horizontal shadow, vertical shadow, blur of that shadow as well as the colour we want the shadow to be Transform Transform The transform property applies 2D or 3D transformation to an element You can things such as rotate, scale, skew, move as well as a few other things to an element Great way of adding animation to your HTML document ... HTML document (you can not put it at any point below) This is not a HTML tag; it is an instruction to the browser informing it which version of HTML the page is written in Always try and use so... it is HTML, HEAD and BODY HTML HTML Tag tells the browser that this is a HTML document HTML is the beginning and end tags in a HTML page It signifies that between its tags is HTML content - It. .. create an unordered list of items LI

tag stands for list item li tag can be used with unordered lists

; ordered lists
and menu lists Each
1. element is item in the list; so one