HTML+CSS course презентация
Содержание
- 2. HTML and CSS: Agenda Differences Terms Syntax Structure Linking together
- 3. Background – how Internet works
- 4. Background – how Internet works
- 5. HTML & CSS: first look HTML is a hyper text markup language
- 6. Your long-term goal http://bl.ocks.org/
- 7. HTML versions & declaration
- 8. HTML Terms: elements Elements: h1, h2, h3, h4, h5, h6, p, a, div, span, strong, em,
- 9. General HTML document <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello World</title>
- 11. CSS Terms, Structure & Syntax Selectors: span { ... } Properties and
- 12. CSS Selectors
- 13. Comments within HTML & CSS HTML comments wrap the content starting with <!-- and end with -->.
- 14. Referencing CSS in HTML Inline CSS <p style="color: #f60; font-size: 16px”>
- 15. Скачать презентацию
Слайды и текст этой презентации
Слайд 1
Описание слайда:
HTML+CSS course
Module 1. Introduction: Terminology, Syntax,
Structure, Coding Practices
Слайд 2
Описание слайда:
HTML and CSS: Agenda
Differences
Terms
Syntax
Structure
Linking together
Слайд 3
Описание слайда:
Background – how Internet works
Слайд 4
Описание слайда:
Background – how Internet works
Слайд 5
Описание слайда:
HTML & 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 <p> … </p> is used to
display few words on a web page, CSS selects
this element to determine its appearance.
Слайд 6
Описание слайда:
Your long-term goal
http://bl.ocks.org/
Слайд 7
Описание слайда:
HTML versions & declaration
Слайд 8
Описание слайда:
HTML Terms: elements
Elements:
h1, h2, h3, h4, h5, h6, p, a, div, span, strong, em, etc.
Tags are decorating elements:
<span>some text</span> — content inside opening and closing tags.
<br> — the void elements are area, base, br, col, hr, img, input, link, meta, param, etc.
Attributes:
<a href="http://softserve.ua">Visit us!</a>
Слайд 9
Описание слайда:
General HTML document
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is a website<br>with <em>br</em> element</p>
<a href="http://softserve.ua">Visit us!</a>
</body>
</html>
Слайд 10
Описание слайда:
Слайд 11
Описание слайда:
CSS Terms, Structure & Syntax
Selectors:
span { ... }
Properties and values:
p {
color: #ff0;
font-size: 16px;
}
Слайд 12
Описание слайда:
CSS Selectors
Слайд 13
Описание слайда:
Comments within HTML & CSS
HTML comments wrap the content starting with <!-- and end with -->.
CSS comments wrap the content starting with /* and end with */.
Слайд 14
Описание слайда:
Referencing CSS in HTML
Inline CSS
<p style="color: #f60; font-size: 16px”>
Internal CSS
<style type="text/css">
p {…}
</style>
<p> ... </p>
External CSS File
<link rel="stylesheet" href="file.css">
Скачать презентацию на тему HTML+CSS course можно ниже:
