learn html and css from scratch
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