learn html and css from scratch

Download Learn html and css from scratch

If you can't read please download the document

Upload: mohd-manzoor-ahmed

Post on 22-Jan-2017

697 views

Category:

Technology


1 download

TRANSCRIPT

Learn HTML & CSS From Scratch

Mohd Manzoor Ahmed [MCT]manzoor_trainer manzoorthetrainer.com

Get The Complete Video Course Here(https://goo.gl/I5eopR)

What Are We Going To Learn?Introduction To HTMLPage StructureTagsComments And Page InformationDocument StructureLinksText MarkupListsTablesImagesStatic Vs Dynamic PagesFormsIntroduction To CSSApproaches Of Applying StyleCSS SelectorsDevelop A Static Web SiteHosting Web Site On IIS

Why HTML?Share information with the world in the form of different pages linked together.

Get The Complete Video Course Here

What is HTML?HTML stands for HyperText Markup Language.It is used to design and develop Web Pages.SimpleBrowser/Platform IndependentNot Case SensitiveA medium for User Interface

Observation..Lets observer a real world any page. Say Google.com

Page Structure

HTML Or Web Page

A Demo..Let us create our first page say MyFirstPage.html.You can use any text editor to create a web page, say notepad.Its extension should be either htm or html(popularly used).We need any browser to run the page, say chrome.

Introduction To Visual Studiohttps://www.visualstudio.com/en-us/news/vs2013-community-vs.aspx

Any Version

Hello Open TagClose TagAttribute

KeyValueContent

HTML Element

Everything Is A TagThe HTML instructions are called Tags. Basically tags are classified into two categories.Container Tags :Tags that have starting as well as ending part.e.g.: Title of the Web Page Empty Tags : Tags that do not have the closing part.e.g.:
HTML instructions + text to which the instructions apply is an HTML element.

AttributesA key value pairs inside the tag which defines the some features of text are called as Attributes.Some important attributes of the BODY tagBGCOLOR = color / #rrggbbBGPROPERTIES=FIXEDBACKGROUND = url of the imageTEXT = color / #rrggbbCore attributes of other tags inside body.id, name, value and class

Get The Complete Video Course Here

Demo..For Attributes

Comments And Page Information Page information goes into the tagMostly used page information tags are

Demo..For Page Information

Document StructureBelow are the mostly used tags to structure the content on the body of the page.


Demo..For Document Structure Tags

Text MarkupTags mostly used to give some different style or look to the text on the body of page.

Get The Complete Video Course Here

Demo..For Text Markup

ListsThe tags used to list items either in bullet style or numbered style

  • Demo..For List

    Tables

    Most of the page layouts are based upon tables or to show some tabular data on web pages we some time use tables

    Demo..For Tables

    Get The Complete Video Course Here

    ImagesTo display images on web page we use image tag i.e.,

    Demo..For Images

    LinksThe link tags are also called as anchor tag The link tags are used to Link one page to another page .To make a section of page as anchor.One section of page to another section(anchor) of page.Link to send email board

    Demo..For Anchor Tag

    Static Vs Dynamic PagesStatic Web PageSame content to any user, anywhereRequires web development expertise to update siteSite not as useful for the userContent can get stagnantDynamic Web PageContent may differ as per the user request and locationMuch more functional websiteMuch easier to updateNew content brings people back to the site and helps in the search engines

    FormsWhenever we want to interact with end user basically we need a form.Forms can be created with the following form tags

    (I love it)

    Demo..For Form Design

    Why CSS?As HTML is mark-up language, I say CSS is a make-up language.Dont you want your content look good to the end user

    What is CSS?CSS stands for Cascading Style Sheets.CSS describes how your web page should look.For example its layout, color, font, size, etc.,

    Observation..Lets observer a real world any page. Say Google.com

    Get The Complete Video Course Here

    Three Different Approaches There are three different approaches of inserting a style sheet:Inline styleInternal style sheetExternal style sheet

    InLineIt is used to apply style to a single element.Eg:

    This is my Div.

    Not recommended to use extensively.

    Demo..For Inline Style..

    Internal

    It is used to apply style to a single page.

    Get The Complete Video Course Here

    Demo..For internal style sheet

    ExternalIt is used to apply style to all page of a web site.External style sheet is a file created using any text editor.It should have .css as extensionEvery page should refer that file using tagSay my style sheet file name is myStyle.css The link that I should include in head is

    Demo..For external stylesheet

    div.x { color: red; text-align: center;}

    SelectorPropertyValueDecorationDecoration

    Style For DivClassStyle For Div

    CSS SelectorsTo find an element on the page and map it to the style we use different selectors.Few of them are as followsElementidclassgrouping

    element SelectorSelect all elements and apply the style.div { color: red; text-align: center;} The content goes here

    Demo..For element selector

    Get The Complete Video Course Here

    id SelectorSelect the element with myDiv as id and apply the style.#myDiv { color: red; text-align: center;} The content goes here

    Demo..For element selector

    class SelectorSelect the elements with myClass as class and apply the style..myClass { color: red; text-align: center;} The content goes here The content goes here

    element.class SelectorSelect the all Div elements with myClass as class and apply the style.Div.myClass { color: red; text-align: center;} The content goes here The content goes here The content goes here

    Demo..for class selector

    grouping Selectordiv { text-align: center; color: red;}h2 { text-align: center; color: red;}p { text-align: center; color: red;}

    div, h2, p { text-align: center; color: red;}

    Get The Complete Video Course Here

    Demo..For grouping selector

    css Selector Traversingul#menu { padding: 0;}

    ul#menu li { display: inline;}

    ul#menu li a { background-color: black; color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px 4px 0 0;}

    ul#menu li a:hover { background-color: orange;}

    • HTML
    • CSS
    • JavaScript
    • PHP

    Demo..For grouping selector

    Develop A Static Web SiteStep 1: Create all pages (Home, About us, Our Services and Contact Us)Step 2: Add a list of links to all pagesStep 3: Create a style sheet Step 4: Apply style to all pages

    Note: Using free static website templates. www.templatemonster.com

    Define LayoutHeaderLeftContentfooter

    Demo..For developing static website.

    Hosting Web Site On IISCheck For IIS availability on the OS Install IIS On Windows7Host the website

    Demo..For hosting website on iis.

    Thanks

    Get The Complete Video Course Here