HTML

2008-08-21 , Papiewski Łukasz , WEB / PHP / HTML5

HTML -Hyper Text Markup Language

Nie jest to do końca język programowania, lecz język znaczników, pozwalający opisać strukturę przesyłanych informacji.

Każdy znacznik może posiadać pewne atrybuty nadające pożądane cechy sekcji przez nie objętej np. wygląd, wielkość, marginesy, rodzaj czcionki czy kolor.

Atrybuty te de facto odchodzą dzisiaj już do lamusa kosztem CSS, a ich stosowanie jest praktyką niewskazaną ze względów spójności kodu i walidacji.

Pokrótce główne kotwice (anchors) HTML'a można ukazać jako: < html > w nim zawiera się całość dokumentul < head > zawiera nagłówek, kodowanie i informacje identyfikujące autora jak i witrynę w Sieci < body > tekst właściwy strony

Warto wiedzieć


Na starcie chciałbym wyszczególnić sekcję znajdującą się w głowie (head) naszego kodu, jest ona często pomijana, lecz ma bardzo ważne znaczenie, gdy nasza strona faktycznie znajduję się już w internecie.

Meta - przedrostek oznaczający ponad, poza lub o czymś w innym kontekście, tu informuje o czymś co dotyczy całego napisanego kodu. Za jego pomocą można zdeklarować e-mail, imię i nazwisko autora strony, datę powstania, czy kodowanie tekstu. Posiada także, ważne dla robotów pozycjonujących dane, które na pewno w jakiś mniejszym lub większym stopniu mogą wpłynąć na popularność naszej witryny.
Dlatego warto zwrócić szczególną uwagę na tą część kodu oraz świadomie umieszczać tu dane.

Ważnymi znacznikami w sekcji 'meta' są 'keywords' gdyż dane te są wykorzystywane przez wyszukiwarki.
Jednak najpierw należy naszą stronę zgłosić na adres google.com/addurl aby witryna została umieszczona w bazie wyszukiwania Google'a.

Inną ważną stronką, które warto odwiedzić przy okazji, jeżeli chcemy diagnozować i zarządzać to jak nasza strona jest wyszukiwana, jest https://www.google.com/webmasters ale o tym dokładniej później.

Kiedyś

Poniżej pusty szablon:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="nazwa strony" content="zawartość"/> 
<link rel="stylesheet" type="text/css" href="nasz plik ze stylami"/>
<title>Frontpage </title>
</head>
 <body oncontextmenu="return false">
<table class="read">
<tr>
<td id="top_menu">
   <a href="#temat1"> </a> |
   <a href="#temat2"></a> |
   <a href="#"></a> |
   <a href="#"></a> |
   <a href="#"></a><br>
</td>
</tr>
 <tr>
<td id="header">
Nagłówek
</td>
</tr>
 <tr><td>
 <b>Tytuł Strony</b>
<p>
Treść
</p>
<b>_</b>
</td>
</tr>
</table>
</html>

Powyższe należy umiejętnie wypełnić. Nagłówek wskazuję że treść jest w najnowszym formacie. Warto zwrócić uwagę na pedantyczne przestrzeganie jego specyfikacji. Pomoże nam w tym walidator i informacje w linku, który widzimy w linijce pod typem dokumentu.
Następne miejsce opcjonalnie do zmiany to może być 'charset'.

Najnowsze trendy HTML

Samo HTML takży szybko ewoluuję by sprostać nowym wyzwaniom. Dzisiaj takimi wyzwaniami są aplikacje mobilne. Powyższa wersja to HTMl 4 Strict jednak, natomiast ostania wersja to HTML5.

<!DOCTYPE html> 
<html lang="pl">
	<head>
		<meta charset="utf-8">
		<title>Title</title>
		<meta description="description" content="SEO opis" />
		<meta name="keywords" content="keywords" />
		<meta name="robots" content="index,follow" />
		<link rel="icon" href="favicon.ico">
		<link rel='apple-touch-icon' href="apple-touch-icon.png" >
		<link rel="stylesheet/less" type="text/css" href="global.less" />
		<script src="less.min.js" type="text/javascript"></script>
		<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
 
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1">
	</head>
	<body>
		<header>
		</header>
		<article>
			<section></section>
		</article>
		<aside id="left_column">
			<section>
			</section>
			<section>
			</section>
		</aside>
		<footer>
		</footer>
	</body>
</html>

Cytaty

- Simplicity is the ultimate sophistication. - Leonardo da Vinci,
- Popularny człowiek wzbudza zawiść potężnych - Thufir Hawat o Leto Atrydzie (na Kaladanie),
- Szczęście następuje po smutku, a smutek po szczęściu; człowiek jest naprawdę wolny, gdy przestaje rozróżniać między smutkiem a szczęściem, między dobrem a złem - Aforyzmy buddyjskie.