Categories
HTML, CSS, JavaScript School

Да научим HTML, CSS, JavaScript, jQuery – част 2 – Основи

И така… продължаваме напред. Нека да отворим файла, който сме създали с NetBeans. Неговото съдържание трябва да е нещо като:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>TODO write content</div>
</body>
</html>

Това са основните елементи на една HTML страница. Това са така наречените тагове (примерно <title>). Почти всички тагове отговарят на структурата <отварящ> </затварящ>. Някой, като Meta (вижте по-горе) не са така. И основното тук е, че това се наричат тагове. Всеки так може да съдържа атрибути (виж пак meta). Ще разглеждаме всеки таг по отделно и неговите атрибути.

Започваме с основните и ЗАДЪЛЖИТЕЛНИ елементи на всяка HTML страница (т.е. не ги забравяйте):

<!DOCTYPE html> – чрез този елемент се показва текущата страница коя версия на HTML е. Потърсете в гугъл какви други версии има 🙂 търсете HTML doctype.

<html> тага- това е основния таг, в който се съдържат всички останали.

<head> – тук се дефинират тагове, които не се визуализират и имат за цел да опишат страницата. (ще говорим за това подробно)

<body> – всичко което добавите се изпринтира на страницата

1 Пробвайте да промените съдържанието в <title> таг-а. Напишете нещо по ваш избор. След това отворете браузъра. Този текст излиза като заглавие къде? (давам подсказка- вижте табовете на браузъра).

2 Сменете текста в тага <div> и пак вижте в браузъра

3 Сега в <div> тага добавете следните тагове с съдържание вашите имена: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <p>, <code>, <del> и след като го направите – вижте какво се е получило в браузъра. Експериментирайте с тях.

Но да дам и малко повече подробности за head тага- ще повторя, че той съдържа елементи, които описват страницата, както и други, които добавят определен вид ресурси. Както всеки друг и този има атрибути (какво бяха те?). Примерно class, id. За да видите какви има, в NetBeans отидете на тага, добавете един интервал и натиснете CTRL+SPACE – това ви дава подсказки. Запомнете го, защото това ще ви е в голяма помощ на всякъде.

В момента head тага съдържа два мета тага и един title- какво им е предназначението? Тайтъла го разбрахте, а метата- както се досещате – определени данни за страницата. Като първия оказва, че енкодинга на страницата е UTF-8 – и сега е момента да погледнете в интернет какво означава това.

4 И последно- потърсете в интернет всички възможни тагове и екпериментирайте с тях да видите какво се случва. Може да  добавите в коментарите :Р

 

Това е за сега. Скоро ще се видим па 🙂

Categories
HTML, CSS, JavaScript School

Да научим HTML, CSS, JavaScript, jQuery – част 1 – Подготовка

От отдавна искам да подготвя нещо подобно, но все не остава време… Ето, сега имам стимул- едно приятелче, което иска да се научи. Затова, всеки един урок и занимания, които му давам, ще ги публикувам, за да може и други да се възползват от тях. Всеки един от уроците ще бъдат кратки за изпълнение, в порядъка 30-60 минути, а може и по малко, както в случая. Зависи кой колко бързо се справя. Най- важното, което трябва да научите обаче е да слушате и виждате- т.е. ако някой ви даде съвет за нещо- не го подминавайте, дори и да не е прав (според вас) – дайте му минутка. Ии… така.

Част 1 – Подготовка, среда и едитор

Много е важно да четете какво е написано и какви съвети се дават по сайтовете, затова ще ви е нужен английски език. Не трябва да го знаете перфектно, но малко повече от познания.

Започваме с подготвяне на средата за работа. За целта ни е нужен едитор. Може да се използва всякакъв, дори и NotePad, но специфичните едитори ви дават малко повече детайли, дават ви подсказки и други полезни неща. Ще ви запозная с NetBeans (ако решите, разгледайте и едиторите: Atom , Sublime , Visual Studio Code) – за Windows среда. И стъпка по стъпка:

1. Открийте и инсталирайте едитора NetBeans- версията за HTML & PHP). Тук ще подам и няколко подсказки- Java, Архитектура (64/32). Също така след тези курсове, с малко повече желание – ще има и за PHP, Phalcon.

2. Отворете едитора и разгледайте с какво разполагате. Хвърлете око на опциите

3. Направете си директория в компютъра, кръстете я www и я сложете на D: или на друг дял по желание. Не слагайте интервали в името на папката (за това ще говорим по нататък)

4. В създадената директория създадете нова, наименувайте я first-project

5. Следващите няколко точки са за работа в NetBeans – активирайте дяла с проекти (Projects) и добавете нов проект от тип HTML и изберете пътя на проекта да е създадената по горе директория /www/first-project

6. В този проект, добавете нов файл от тип HTML и с име index.html

7. Ако всичко е наред, отворете файла index.html и разгледайте съдържанието му.

8. Ще имате един таг (така се казва) с име: <body> , а в него <div>TODO write content</div> – променете съдържанието на този елемент, напишете вашето име на мястото на “TODO write content”.

 

А сега- за финал, отворете My Computer/ File explorer и отидете в създадената ни директория  /www/first-project . Сега кликнете два пъти върху index.html и той ще ви се отвори в браузъра. 🙂

 

Следващия урок- ще ви обясня кое какво значи, структура, за какво се използва и как да добавяте нови елементи.

Categories
HTML, CSS, JavaScript School Wisdom

Web Marathon курс 2014- завърши. Честито :)

Уеб дизайн маратон е серия от курсове, насочени към всички, които искат да влязат в света на уеб дизайна и front-end програмирането. Маратонът се състои от 4 курса, всеки с продължителност от 2 дни, като за улеснение на желаещите, всички курсове са съботно-неделни. По време на маратона, участниците ще създадат напълно работещ уеб сайт, който ще бъде публикуван на персонален субдомейн в края на курса.

И така… той завърши. Групите учащи бяха две. Мисля, че останаха доволни. Имаше и печеливши- реших да ги изненадам и с една страхотна книга за HTML5 на Орайли. Щях да разкажа повече, но ще го отложа за по нататък 🙂

Поздрави на всички.

ps: http://newhorizons.bg/blog/2014/02/boris-delev-interview/

Categories
HTML, CSS, JavaScript School Wisdom

Заедно в час… и аз :)

Своге- училище Велизар Пеев! Интересно градче, страхотно училище, велики преподаватели, усмихнати хора, красиви деца. Браво за постиженията и материалната база, с която разполагате. Радвам се, че бях част от вас, дори и за миг.

Беше кратко курсче по HTML и CSS (web) на два от завърсващите класове. Нямаше време дори да раздам правосъдие (хахахха). Беше невероятно преживяване.

Categories
HTML, CSS, JavaScript School

CSS3 files…

http://www.css3files.com/ – оле. Страхотен и изключително полезен сайт. Става дума (както може би се разбира) за CSS3 и неговите възможности. На пръв поглед не са толкова много неща, но ако се поровите… не е баш тъй.

Categories
HTML, CSS, JavaScript School

Say Hello to HTML 5

http://www.w3.org/html/logo/

Categories
HTML, CSS, JavaScript School

CSS и CamelCase… защо не?

…Защото много хубаво са го описали в статията тук : http://csswizardry.com/2010/12/css-camel-case-seriously-sucks/ …Накратко, защото:

– синтаксисът на CSS се разделя с тире (font-style, background-color…)

– XHTML е език, който се описва с малки букви

– трудно за разбиране при писането на правила (#content, #subContent)

– трудно е за четене (#someIdMadeBefore или #some_id_made_before)

– …и трудно за разбиране при повече съдържание (в сайта е описано доста подробно Smile

– работата с едиторите е по-друдна. При методът с тирета- подсказките са правилни.

Накрая и въпросът- Защо не с долни чертички… ами- причините са почти идентични.

 

И както в статията – ще завърша : синтаксисът и начинът на писане си зависи само от теб- пиши както смяташ за най-добре, но е хубаво да има последователност и правила. Smile

Categories
HTML, CSS, JavaScript School

…малко идеи за CSS3 text-shadow…

Попаднах на интересна статия даваща много красиви идеи при използването на text-shadow. Eто ви примерчетата, които предлагат, както и пълно описание на изпълнението.

Междувременно може да прочетете по простичко, как се прави – тук.

Ааа, вече има и обновление на Supersized – любимият ми плъгин за jquery.