HTML AND CSS

• Website: A website is a collection of related web pages which include text, image, audio, etc
• Webpage: It is a document commonly written in HTML (Hypertext Markup Language) that is accessible through the Internet
• Web browser: A web browser is a software application for accessing information on the World Wide Web
• Hypertext: It is the text which contains links to other texts
• Markup Language: It is a language that uses tags to mark-up a text document that instructs the browser how to display the text
• HTML stands for Hyper Text Markup Language. It was created by Tim Berners Lee and the first version was released in 1993. It is a tag-based language where tags instruct the browser on what and how to display
• An HTML document is divided into two sections: HEAD and BODY. The HEAD section contains information such as title and style, not displayed on the webpage. The BODY section defines the main content of the document that gets displayed on the webpage
• To create an HTML document, you need a text editor (e.g. Notepad, Notepad++, Wordpad, Textedit, Textmate) and a web browser
• Types of HTML Editors:

  • Text Editors (e.g. Wordpad, Notepad)
  • WYSIWYG (What you see is what you get) (e.g. Dreamweaver)
• Types of Tags:

  • Container tag/element: It has an opening as well as closing tag
  • Empty tag/element: It doesn’t have a closing tag
• Formatting tags:

  • Bold: <B></B>
  • Italics: <I></I>
  • Underline: <U></U>
  • Center: <Center></Center>
  • Strikethrough: <strike></strike>
  • Superscripts: 
  • Subscripts: 
  • <BR> - To insert line breaks
  • <HR align="center" size="4" width="50%"> - HR tag is used to insert a horizontal line/break
• Body tag attributes:

  • bgcolor: background color
  • top margin: top margin of webpage (values are in pixel)
  • left margin: left margin of webpage (values are in pixel)
  • text: to change the text color
• Font tag attributes:

  • face: defines font style (e.g. Arial, Calibri)
  • size: defines font size [1-7] (1-smallest, 7-largest; default size is 3)
  • color: defines text color
• Paragraph tag:

  • Align can take four values: center, right, left, justify
• Heading <H1>…<H6> tag:

  • There are six levels of the Heading tag
  • Use these levels in any order
• Marquee Tag: <Marquee>Scrolling text</Marquee>
• Image Tag: To insert a picture. It’s an empty tag <img src="file.jpg" height="300" width="350" alt="image not found">
• Anchor Tag: To link different webpages <A href="page.html">click here </A>
• Cascading Style Sheets (CSS) is the language used to style an HTML document. There are three ways of inserting a style sheet: External CSS, Internal CSS, Inline CSS
• External CSS: Change the look of an entire website by changing just one file. Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section
• Internal CSS: Used to style a single HTML page. Defined inside the <style> element, inside the head section
• Inline CSS: Apply a unique style for a single element. Add the style attribute to the relevant element
• CSS Syntax:

  • Selector points to the HTML element you want to style
  • Declaration block contains one or more declarations separated by semicolons
  • Each declaration includes a CSS property name and a value, separated by a colon
  • Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly brackets
• CSS font-family Property: Used to specify the font of a text. The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems
• Styling Links:

  • Links can be styled with any CSS property (e.g. color, font-family, background, etc.)