Movatterモバイル変換

What we’ll cover?• What HTML and CSS is• Structure of a HTML Document• HTML editing software• How to create a webpage• Text, links, lists and images• Various other HTML tags• Adding CSS to a webpage• Where to learn more

Hypertext is textwhich contains links to other texts.Markup languages are designed for theprocessing, definition and presentation oftext. A markup language is to define thevisual elements of the web page.

Why do we need HTML?• To define the structure of a web page(HTML is the Skeleton of any modernwebsite)• To add contents to our page(text, pictures, videos etc…)• To link pages to one another in order tobuild an entire website

Cascading meansthat styles can fallfrom one stylesheet to another,enabling multiplestyle sheets to beused on one HTMLdocument.

Why do we need CSS?• Allows us to style any web page• CSS describes how HTML elements shouldbe displayed• Because of its cascading nature it allowsyou to overwrite any previously definedrules

3 Awesome Front-endTechnologiesHTMLThe structure of a web pageCSSThe styling of a web pageJavaScriptMakes a web page interactive

HTML + CSS + JavaScript = Black Magic

HTML + CSS = Source CodeUser-friendly visible result

How to view the pagesource?Right ClickSelect View pagesource from thedropdown menu

How to inspect pageelements?Right ClickSelect Inspectfrom thedropdown menu

Google Chrome Inspector in ACTION

• A programming software(but every text editor will do)...• Your file, named in .html→ my-own-page.html• A browser, to display your page.What do we need?

• FileZilla to upload the page to a server(FileZilla or CyberDuck)What do we need?

Coding correctly maximizes the chanceto have your page displayed correctly onmost of the platforms!

Email Clientsthe late runners• Think about mail clients aseven-less-compliant browsers.

Responsive Design• Adapts to different screen sizes• One version for all the devices thatsupports HTML and other modern webtechnologies

Now its easier than ever tocreate mobile apps usingHTML, CSS and JavaScript.

Like every language, HTMLand CSS have rules andstandards.HTML5 CSS3

A - Boxes principle• A box into a box into a box… : HTML is likeRussian dolls.• Each of those boxes is called a tag.

A - Boxes principleHTMLDOCUMENTHEAD BODYTABLETITLECSSPARAGRAPHIMAGE

B - What is a tag?• A tag is used to declare a specific type ofcontainer or element.• TAG STRUCTURE :<name (attributes (style/css)) ... > [content] </name>

Example• Code<p align=“center” style=“font-size: 34px; color: red;”>Hello World</p>• ResultHello World !

C - A Basic Page<!DOCTYPE html ><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>My page</title></head><body><p align=“center" style="font-size:14px; color:#c00;">Hello World!</p></body></html>Whichlanguageisused→HTMLThedocumentHEAD - here:- Specialcharacters- PagetitleBody→CONTENT(hereaparagraph)Hello World !

Method - 1<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>My page</title></head><body><p align="justify" style="font-size:14px;color:#c00;> Hello World!</p></body></html>

<!doctype html><html><head><title>My page</title><style type="text/css">.p {font-size: 14px;color: #c00;text-align: center;}</style>.</head><body><p>Hello World !</p></body></html>Method - 2

<!doctype html><html><head><title>My page</title><link rel="stylesheet" type="text/css" href="my-style.css">.</head><body><p>Hello World !</p></body></html> p {font-size: 14px;color: #c00;text-align: justify;}my-style.css :Method - 3

D – Popular HTML tags• Heading• Paragraph• Anchor / Link• Image• Unordered List• List Item• Horizontal Rule• Division• Table<h1> - <h6><p><a><img><ul><li><hr><div><table>

Hands-on TutorialLets build a website and learnmaking mistakes!

Step-1• Create a folder named Hello [Syed]• Fire up your code editor• Write Hello World and save the file asindex.html• Create another file named style.css

Let’s give a title to our webpage

Populate Body : Header section

Populate Body : About Me section

Link an externalstyle sheete.g. style.css

https://codepen.io/sami3d/pen/YZbGmq

Why do they get rendereddifferently?• They are hosted in a 3rd party server• Because of security issues• Different email clients uses differentrendering engine

Solution?• We design them considering its 1995!!• We use tables• We use inline css• We avoid complicated Layouts• We avoid HTML5 and CSS3

<table width="300" height="200" align="center"><tr style="font-size:18px;color:#000000;" align="center"><td width="100" style="background-color:#CC0000;">Holly</td><td style="background-color:#00CCFF, color:#FFFFFF;">Molly !</td></tr></table>Holly Molly !

Some tips:• Use of <table> instead of <div>• Sliced images have to havestyle="display:block;".• Any special character in text (é, à, “, €, …)should be encoded :é → é OR € → €

Some tips:• CSS style has to be mainly inline (inside thetag’s style=" " attribute). If there is some CSSin the <head> section, it’s a best practice tocopy and put them at the bottom again.

Some tips:• “Pixels” (image of 1x1 pixel),like any content, has to bebefore closing </body></html>tags

THE NET NINJAInteractive LessonsVideo Tutorials

Things we have discussed• What HTML and CSS is• Structure of a HTML Document• HTML editing software• How to create a webpage• Text, links, lists and images• Various other HTML tags• Adding CSS to a webpage• Adding JavaScript to a webpage• Where to learn more

Movatterモバイル変換

Change Language

Intro to HTML & CSS

Embed presentation

Recommended

More Related Content

What's hot

Similar to Intro to HTML & CSS

Recently uploaded

Intro to HTML & CSS