HTML+CSS course презентация

Содержание

1. HTML+CSS course
2. HTML and CSS: Agenda Differences Terms Syntax Structure Linking together
3. Background – how Internet works Web browser
4. Background – how Internet works Web browser Open HTML Render HTML
5. HTML & CSS: first look HTML is a
6. Your long-term goal http://bl.ocks.org/ D3.JS library: JavaScript
7. HTML versions & declaration Declare HTML5:
8. HTML Terms: elements Elements: h1, h2,
9. General HTML document
10. Hello World
11. CSS Terms, Structure & Syntax Selectors: span {
12. CSS Selectors
13. Comments within HTML & CSS HTML comments wrap the content
14. Referencing CSS in HTML Inline CSS

Слайд 1HTML+CSS course Module 1. Introduction: Terminology, Syntax, Structure, Coding Practices

Слайд 2HTML and CSS: Agenda
Differences
Terms
Syntax
Structure

Linking together

Слайд 3Background – how Internet works
Web browser
Web server
3. Transfers HTML, CSS, etc.
2.

Generates

4. Renders

1. Asks something

Слайд 4Background – how Internet works
Web browser
Open HTML
Render HTML

Слайд 5HTML & CSS: first look
HTML is a hyper text markup language created

to give content structure and meaning.
CSS, or cascading style sheets, is a presentation language created to give content style and appearance.

Example: HTML element

…

is used to
display few words on a web page, CSS selects
this element to determine its appearance.

Слайд 6Your long-term goal
http://bl.ocks.org/
D3.JS library: JavaScript renders SVG elements inside XHTML file

and uses CSS to style SVG.

Слайд 7HTML versions & declaration
Declare HTML5:

Browser can only display an HTML

page 100% correctly if it knows the HTML type and version used

Слайд 8HTML Terms: elements
Elements:
h1, h2, h3, h4, h5, h6, p, a, div, span, strong, em, etc.
Tags are

decorating elements:
some text — content inside opening and closing tags.

— the void elements are area, base, br, col, hr, img, input, link, meta, param, etc.
Attributes:
Visit us!

Слайд 9General HTML document

Hello World

Hello World
This is a website
with br

element

Visit us!

H1 is the same as h1

and
are OK!

is better.

Слайд 10

Hello World

Hello World
This is a website
with br element
Visit

us!

Слайд 11CSS Terms, Structure & Syntax
Selectors:
span { ... }
Properties and values:
p {
color: #ff0;
font-size:

16px;
}

Слайд 12CSS Selectors

Слайд 13Comments within HTML & CSS
HTML comments wrap the content starting with .
CSS comments wrap

the content starting with /* and end with */.

Слайд 14Referencing CSS in HTML
Inline CSS

{…}

...

External CSS File

Скачать презентацию

HTML+CSS course презентация

Содержание

Слайд 1HTML+CSS course Module 1. Introduction: Terminology, Syntax, Structure, Coding Practices

Слайд 2HTML and CSS: Agenda
Differences
Terms
Syntax
Structure

Linking together

Слайд 3Background – how Internet works
Web browser
Web server
3. Transfers HTML, CSS, etc.
2.

Слайд 4Background – how Internet works
Web browser
Open HTML
Render HTML

Слайд 5HTML & CSS: first look
HTML is a hyper text markup language created

Слайд 6Your long-term goal
http://bl.ocks.org/
D3.JS library: JavaScript renders SVG elements inside XHTML file

Слайд 7HTML versions & declaration
Declare HTML5:

Browser can only display an HTML

Слайд 8HTML Terms: elements
Elements:
h1, h2, h3, h4, h5, h6, p, a, div, span, strong, em, etc.
Tags are

Слайд 9General HTML document

Hello World

Hello World
This is a website
with br

Слайд 10

Hello World

Hello World
This is a website
with br element
Visit

Слайд 11CSS Terms, Structure & Syntax
Selectors:
span { ... }
Properties and values:
p {
color: #ff0;
font-size:

Слайд 12CSS Selectors

Слайд 13Comments within HTML & CSS
HTML comments wrap the content starting with .
CSS comments wrap

Слайд 14Referencing CSS in HTML
Inline CSS

Обратная связь

Что такое ThePresentation.ru?

HTML+CSS course презентация

Содержание

Слайд 1HTML+CSS course Module 1. Introduction: Terminology, Syntax, Structure, Coding Practices

Слайд 2HTML and CSS: AgendaDifferencesTermsSyntaxStructureLinking together

Слайд 3Background – how Internet worksWeb browserWeb server3. Transfers HTML, CSS, etc.2.

Слайд 4Background – how Internet worksWeb browserOpen HTMLRender HTML

Слайд 5HTML & CSS: first lookHTML is a hyper text markup language created

Слайд 6Your long-term goalhttp://bl.ocks.org/D3.JS library: JavaScript renders SVG elements inside XHTML file

Слайд 7HTML versions & declarationDeclare HTML5:Browser can only display an HTML

Слайд 8HTML Terms: elementsElements: h1, h2, h3, h4, h5, h6, p, a, div, span, strong, em, etc.Tags are

Слайд 9General HTML documentHello WorldHello WorldThis is a websitewith br

Слайд 10Hello WorldHello WorldThis is a websitewith br elementVisit

Слайд 11CSS Terms, Structure & SyntaxSelectors: span { ... }Properties and values:p {color: #ff0;font-size:

Слайд 12CSS Selectors

Слайд 13Comments within HTML & CSSHTML comments wrap the content starting with . CSS comments wrap

Слайд 14Referencing CSS in HTMLInline CSS

Похожие презентации

Обратная связь

Что такое ThePresentation.ru?

Слайд 2HTML and CSS: Agenda
Differences
Terms
Syntax
Structure

Linking together

Слайд 3Background – how Internet works
Web browser
Web server
3. Transfers HTML, CSS, etc.
2.

Слайд 4Background – how Internet works
Web browser
Open HTML
Render HTML

Слайд 5HTML & CSS: first look
HTML is a hyper text markup language created

Слайд 6Your long-term goal
http://bl.ocks.org/
D3.JS library: JavaScript renders SVG elements inside XHTML file

Слайд 7HTML versions & declaration
Declare HTML5:

Browser can only display an HTML

Слайд 8HTML Terms: elements
Elements:
h1, h2, h3, h4, h5, h6, p, a, div, span, strong, em, etc.
Tags are

Слайд 9General HTML document

Hello World

Hello World
This is a website
with br

Слайд 10

Hello World

Hello World
This is a website
with br element
Visit

Слайд 11CSS Terms, Structure & Syntax
Selectors:
span { ... }
Properties and values:
p {
color: #ff0;
font-size:

Слайд 13Comments within HTML & CSS
HTML comments wrap the content starting with .
CSS comments wrap

Слайд 14Referencing CSS in HTML
Inline CSS