Як створити сайт портфоліо

Створення картинної галереї

- відповідає за початок і кінець html коду

- ці теги відповідають за заголовок

- Відповідає за відображення тексту заголовка, тобто в браузері буде сторінка видаватися з таким заголовком. І в пошуковику теж.</p><p><body> - всередині цього тега буде перебувати решті код.</p> <p>У заголовок введемо:</p> <p>"Картинна галерея художника такого то (або портфоліо фотографа такогото)"</p> <p><title>Картинна галерея художника Василя Пупкіна

Тепер у нас є фото. Потрібно написати інформацію про себе - в якій області працюєте, який досвід, в яких події берете участь, трохи біографії і т. П. В результаті ми хочемо, щоб вийшло так: зліва наше фото, праворуч трохи про нас.

Для цього вставляємо таблицю, в лівій клітинці якої буде знаходитися фотографія, а в правій - текст:

Картинна галерея художника Василя Пупкіна

- означає початок і кінець таблиці

width = "100%" - ширина таблиці, в даному випадку вона заповнює всю ширину екрану

border = "1" - ширина кордону таблиці

- створення рядка

- створення стовпчика, в даному випадку в одному рядку створюється два стовпці.

Тепер помістимо в ліву частину таблиці фотографію. Для цього збережемо створюваний нами файл в який-небудь папці наступним чином: файл -> зберегти як -> вводимо назву "index.html" - наш файл зберігається як веб сторінка. Назва index він повинен мати тому, що коли ви набираєте в браузері назву будь-якого сайту, в першу чергу він шукає файл index.html, потім index.htm, index.php і т. Д. У тій же папці, куди ми зберегли цей файл, ми створимо папку "images", в якій будемо зберігати всі наші зображення. У цю папку ( "images") ми перемістимо нашу фотографію "foto.jpg".

Виводимо зображення на екран браузера.

Картинна галерея художника Василя Пупкіна

означає виведення зображення

src = "http://itsait.com/images/foto.jpg" - шлях до фотографії

Тепер необхідно вивести текст у правій частині таблиці.

Картинна галерея художника Василя Пупкіна

Моя біографія. - сюди пишемо текст про себе.

Картинна галерея художника Василя Пупкіна

тег
означає перенесення на новий рядок. Т. е. Текст після цього тега буде виводитися на новому рядку

Властивість cellspacing визначає відстань між осередками таблиці. Воно нам потрібно для того, щоб зображення і текст не зливалися в загальну масу.

Замість тексту "Рядок 1" потрібно вставити нашу першу фотографію. Я сподіваюся, ми її вже приготували і помістили в папку images кореневої папки, де знаходиться наш сайт. Назвемо її pic_1.jpg

- У назвах файлів можна вживати прогалини, тому ми вкажемо знак "_" нижнє підкреслення, або "-" мінус.

Земені текст "Рядок 1" на

У цьому виразі alt означає альтернативний текст, т. Е. Той, який буде відображатися замість картинки, якщо в браузері користувача сайту вимкнено відображення зображень.

Тег title відповідає за виведення підказки при наведенні мишки на картинку.

Ще можна вказати назву зображення під картинкою. для цього послес трочкі виведення зображення поставимо
для переходу на новий рядок і напишемо текст "Фото природи".

Поясню, навіщо ми провели всі ці дії: Пошукові системи для пошуку фотографій використовують теги опису зображення. А якщо поруч з фото буде стояти текст, відповідний опису фотографії, пошукова система вважатиме даний малюнок релевантним запитом, що містить опис фотографії, що допоможе в просуванні сайту в топ видачі пошукових систем. Крім того, можна потрапити в топ пошуку по зображеннях, що дозволить залучити додатковий трафік.

Повернемося до редагування тексту. Збережемо HTML код і перевіримо, як все це відображається в браузері.

Тепер ми бачимо, що з'явилося зображення нашої першої фотографії.

- Рекомендується вказувати розмір фотографії в пікселях, що допоможе браузеру точно розмічати сторінки і зображення ніколи не будуть виходити за задані параметри. Для цього додамо до Тегу атрибути:

height = "" - висота в пікселях і

width = "" - ширина в пікселях.

Зазначимо ширину нашого заздалегідь підготовленого таким, яким воно є. Нехай, в нашому прикладі зображення буде розміром 300 по ширині і 200 по висоті.

Картинна галерея художника Василя Пупкіна

Подивимося, як змінитися фотографія, змінюючи ці розміри, наприклад, ширину 300 поміняємо на 500. Вотографии розтягнеться по ширині. Завдяки цим прийомам - зміни масштабів фото ми можемо виводити великі зображення в меншому розмірі в вікні браузера.

- Якщо необхідно зробити область одного кольору, або градієнтний фон, можна розтягнути малюнок, наприклад, шириною 1 піксель і висотою 20, на потрібну величину використовуючи атрибут width. Це може застосовуватися для прискорення завантаження сторінки, немає необхідності вставляти додатковий малюнок.

Тепер додамо інші фотографії подібним чином в наш код.

Картинна галерея художника Василя Пупкіна