Ú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
doctypeje to samé jakoDOCTYPEneboDoctype, 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent