Úvod do webových technologií.
TL;DR
- HTML definuje strukturu stránky. - CSS definuje zobrazení stránky. - JavaScript přidává funkcionalitu navíc. - HTTP je protokol pomocí kterého kominikujeme mezi klientem a serverem. - JSON je formát/zápis pro ukládání dat.HTML (Hypertext Markup Language)
- HTML
- Struktura stránky (Document outline)
<!DOCTYPE>
<html>
…</html>
<head>
…</head>
(Page information)<base />
-
<meta />
meta informace -
<meta charset="UTF-8 />
kódování stránky -
<title />
titulek stránky
<body>
…</body>
- Komentáře
<!-- oneline or multiline comment -->
- Struktura a obsah (page content and structure)
- Obsah (Page content
-
<h1>
...<h6>
Heading <span>
Inline section-
<p>
Paragraph -
<br />
Zalomení (Line break): používej jen málo -
Nezalomitelná mezera -
<hr />
Horizontal rule (line)
-
- Links
- Page link
- Email link:
<a href="mailto:[email protected]">Email</a>
<a name="anchor"
> Anchor<a href="#anchor">
Link to anchor (works for any element id)
- Text markups
<i>
<b>
- …
- Lists
-
<ul>
Unordered list -
<ol>
Ordered list -
<dl>
Definition list
-
- Tables:
<table>
- Forms and Inputs:
<form>
,<input>
,<textarea>
- Media and embeding
- Image:
<img>
- Video: `
- Audio:
<audio>
- Frame:
<iframe>
- Image:
- Canvas:
<canvas>
- 2D context
- WebGL context
- Členění stránky
-
<div>
Page division (division) <aside>
Sidebar<nav>
Navigation<header>
Header<footer>
Footer<main>
Main<article>
Article<section>
-
- Struktura stránky (Document outline)
HTML elements; HTML attributes
- Syntax a sémantika HTML elementů.
- HTML uvedem pomocí
<!DOCTYPE html>
. - HTML je case insensitive tzn., že
doctype
je to samé jakoDOCTYPE
neboDoctype
, nicméně je dobré zapisovat jakoDOCTYPE
. - HTML sekce
<head>
slouží pro metada a není určena k zobrazení. - HTML sekce
<body>
slouží pro zobrazení obsahu
<h1>
je hlavní nadpis stránky a měl by být uveden pouze jednou.
-
CTRL + Shift + I zapíná v Chrome vývojářské nástroje.
-
CTRL + + zvětšuje font
-
CTRL + - zmenšuje font
-
CTRL + 0 resetuje na 100%
-
Element, atribut tag
-
HTML element je reprezentován HTML tagem.
-
HTML tag může být párový nebo nepárový.
-
Element
- blokový (většina)
- řádkový
Řadkový se dá zobrazit jako blokový a naopak, pomocí CSS.
Tag může mít atribut Elemnt může vlastnost.
<!-- párový -->
<h1> ... </h1>
<!-- nepárový -->
<img />
- Úprava textu a typografie
<b>
vs <strong>
<i>
vs <em>
CSS (Cascading Style Sheets)
<link>
@import
#
id.
class
JavaScript: DOM, JSON, HTTP, CORS
- DOM
- JS: Objects
- JS: Functions
- JS: Prototypes
- JSON
HTTP (Hypertext Transfer Protocol)
-
Mozilla HTML https://developer.mozilla.org/en-US/docs/Web/HTML
-
Mozilla CSS https://developer.mozilla.org/en-US/docs/Web/CSS
-
https://www.quora.com/What-are-some-tips-for-a-person-learning-HTML?no_redirect=1
-
https://kyoshee.medium.com/building-tabs-component-using-only-html-and-css-no-js-74db7790fad2
git subtree push --prefix=dist origin gh-pages