MayDay

Після того, як ви виконали завдання по уроку Робимо таблиці - HTML-старт для дітей , У вас повинна була вийде така таблиця:

Тепер ми зберемо на її основі справжній макет веб-сторінки:

Для цього вам знадобиться .psd макет, скачайте його за цим посиланням: table_maket1

Отже, що тут у нас. У нас є наша таблиця. Насамперед потрібно видалити всі background-color осередків і замість них дати їм border бузкового кольору.

З елементів у нас є два заголовка різних рівнів (h1 і h2), картинка, параграфи з різним розміром шрифту, кнопка Read more>, яку потрібно оформити як <button> </ button>, а також 2 пункту меню, які ми поки залишимо як вже існуючі осередки таблиці.

На що звернути увагу:

Вам знадобиться властивість float. Це слово перекладається як «плавати», в нашому випадку - як «обтікати». Легко запам'ятати по фразі «float, boat» - «пливи, човен».

Текст повинен обтікати картинку з правого боку.

float працює так: якщо текст повинен обтікати СПРАВА, то на картинку потрібно поставити властивість float: left, тобто - навпаки, left - «ЛІВОРУЧ». Картинка як би пливе в ліву сторону осередки і тягне за собою текст, як сміття на воді. Відповідно, якщо картинка повинна бути справа, то float: right ;.

Що важливо пам'ятати - будь-який елемент після елемента з флоатінг буде підтягуватися до нього, як до магніту. Якби тексту було мало, а за цією картинкою слідувала ще одна, її б теж прибило до верхньої як сміття. З цією проблемою ми будемо справлятися пізніше.

Для того, щоб виставити шрифтів потрібні розміри - виділіть текст (або клацніть всередині нього Інстурмент Текст) і подивіться значення у вікні з властивостями шрифту:

В даному випадку ми бачимо, що розмір шрифту - 20 пунктів. Увага - в css ми ставимо розміри шрифтів не в пунктах, а в пікселів, тобто виглядати буде:

font-size: 20px;

Зверніть увагу - між цифрами і px немає пробілу - це стосується будь-яких розмірів в css.

Розміри шрифтів можна ставити також в одиницях em, але краще не йдіть з цього хибним шляхом. Начебто em повинні відповідати за процентне відношення шрифтів до розміру вікна, і ми всі радісно біжимо використовувати ці еми. Це не так! EM відповідає за процентне відношення не до вікна браузера, а до розміру шрифта! У різних браузерах розмір за замовчуванням різний, найпоширеніший - 14px, тобто всі ваші розміри будуть всього лише процентним відношенням до 14-ти пунктам. У цьому немає ніякого практичного сенсу, навпаки - вносить хаос і сум'яття, так як шрифт починає виглядати по-різному в різних браузерах. Підточив все під Хром, в ИЕ відкриваєш - і очі випливають від жаху - що з моїм макетом?!?)).

У тих же властивостях шрифту в фотошопі ми бачимо, що шрифт у нас Georgia.

В html є шрифти, які підтримуються за замовчуванням, і кастомниє шрифти (від слова custom - виготовлений на замовлення).

Поки що ми будемо використовувати шрифти, і Georgia - один з таких шрифтів.

Щоб почати користуватися пошуком Google у вирішенні своїх завдань, виконайте завдання - знайдіть, як задати шрифт через css.

Якщо нічого не знайшли - підказка - найкращий ресурс для пошуку всього необхідного для HTML - це, звичайно, ресурс творців цього самого HTML - W3C. Якщо бачите, що посилання з Гугла веде на адресу http://www.w3schools.com/ - сміливо йдіть туди!

Наприклад, по шрифтах урок від W3C: http://www.w3schools.com/css/css_font.asp . Трохи нижче, в боксах з кнопками Try it Yourself - приклади коду. Ви можете пройти по кнопці і побачити роботу коду в дії. Ви навіть можете змінити значення зліва, натиснути зелену кнопку Run, і вуаля - справа отримаєте новий результат.

Так, на замітку. Чому ми ставимо більше одного шрифту за раз? Це на випадок, якщо якийсь браузер не підтримує даний шрифт. Ми даємо другий в якості дублера, а якщо вже і його браузер не знайшов, то в самому кінці - serif або sans-serif.

serif і sans-serif походять від французьких слів «із зарубками» і «без зарубок». Тобто sans - це «без». Наш шрифт Georgia - із зарубками, тобто serif.

Чим вони відрізняються - ви також можете побачити тут W3C: http://www.w3schools.com/css/css_font.asp .