Как создать сайт портфолио
Создание картинной галереи
Как без знания языков программирования сделать себе на сайт простую и удобную для посетителя картинную галерею? Во-первых, это должно занимать немного времени, а вовторых, при просмотре не должно ничего мешать — будь то кнопки управления или какая то другая ерунда. Открываем программу «блокнот» и с чистого листа прямо сайчас мы с Вами научимся как бесплатно создадть сайт портфолио — картинную галерею.
Пишем:
<html>
<head>
<title></title>
</head>
<boby>
</body>
</html>
<html> — отвечает за начало и конец html кода
<head> — эти теги отвечают за заголовок
<title> — Отвечает за отображение текста заголовка, т.е. в браузере будет страница выдаваться с таким заголовком. И в поисковике тоже.
<body> — внутри этого тега будет находиться остальной код.
В заголовок введем:
«Картинная галерея художника такого то (или портфолио фотографа такогото)»
<html>
<head>
<title>Картинная галерея художника Василия Пупкина</title>
</head>
<boby>
</body>
</html>
Добавим на страницу текст и фото автора. Для этого нам нужна фотография размером, предположим 300×300 пикселей формата «.jpg». Название ее должно быть на английском языке, например, «foto.jpg».
Сжимайте фотографии перед публикацией в интернет. Сделать это можно при помощи Photoshop. Открываем фото, выбираем файл -> сохранить как -> тип файлов JPEG выбираем средний размер файла. Или еще лучше файл -> сохранить для web и устройств -> JPEG Hight.
Теперь у нас есть фото. Нужно написать информацию о себе — в какой области работаете, какой опыт, в каких событиях принимаете участие, немного биографии и т. п. В итоге мы хотим, чтобы получилось так: слева наше фото, справа немного о нас.
Для этого вставляем таблицу, в левой ячейке которой будет находиться фотография, а в правой — текст:
<html>
<head>
<title>Картинная галерея художника Василия Пупкина</title>
</head>
<boby>
<table border=»1″>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
<table> — означает начало и конец таблицы
width=»100%» — ширина таблицы, в данном случае она заполняет всю ширину экрана
border=»1″ — ширина границы таблицы
<tr> — создание строки
<td> — создание столбца, в данном случае в одной строке создается два столбца.
Теперь поместим в левую часть таблицы фотографию. Для этого сохраним создаваемый нами файл в какой-нибудь папке следующим образом: файл -> сохранить как -> вводим название «index.html» — наш файл сохраняется как веб страница. Название index он должен иметь потому, что когда вы набираете в браузере название какого-либо сайта, в первую очередь он ищет файл index.html, потом index.htm, index.php и т. д. В той же папке, куда мы сохранили этот файл, мы создадим папку «images», в которой будем сохранять все наши изображения. В эту папку («images») мы переместим нашу фотографию «foto.jpg».
Выводим изображение на экран браузера.
<html>
<head>
<title>Картинная галерея художника Василия Пупкина</title>
</head>
<boby>
<table border=»1″>
<tr>
<td><img src=»/images/foto.jpg»></td>
<td> </td>
</tr>
</table>
</body>
</html>
<img> означает вывод изображения
src=»/images/foto.jpg» — путь к фотографии
Теперь необходимо вывести текст в правой части таблицы.
<html>
<head>
<title>Картинная галерея художника Василия Пупкина</title>
</head>
<boby>
<table border=»1″>
<tr>
<td><img src=»/images/foto.jpg»></td>
<td><h2>Художник Василий Пупкин</h2>
Моя биография… — сюда пишем текст о себе…
</td>
</tr>
</table>
</body>
</html>
Не забываем сохраняться. Одно из правил программиста: «Сохраняться почаще». Теперь у нас получилась страничка с краткой информацией об авторе. Дбавим на эту страницу картинную галерею. Т. к. Цель данной статьи научить Вас создавать сайты без знания языков программирования — обойдемся простым HTML для реализации простейшей галереи. Даже применяя тот простой метод, о котором будет рассказано далее, Вы сможете сделать хорошую галерею для Вашего портфолио.
После описания автора страницы добавим еще одну таблицу. Причем в ней будет один столбец и множество строк. В каждой строке будет распологаться картина, а снизу под ней описание. Добавим страницу с тремя строками:
<html>
<head>
<title>Картинная галерея художника Василия Пупкина</title>
</head>
<boby>
<table border=»1″>
<tr>
<td><img src=»/images/foto.jpg»></td>
<td><h2>Художник Василий Пупкин</h2>
Моя биография… — сюда пишем текст о себе…
</td>
</tr>
</table>
<br /><br />
<table border=»0″ cellspacing=»15″>
<tr>
<td>Строка 1</td>
</tr>
<tr>
<td>Строка 2</td>
</tr>
<tr>
<td>Строка 3</td>
</tr>
</table>
</body>
</html>
Тег <br /> означает перенос на новую строку. Т. е. Текст после этого тега будет выводиться на новой строке
Свойство cellspacing определяет расстояние между ячейками таблицы. Оно нам нужно для того, чтобы изображения и текст не сливались в общую массу.
Вместо текста «Строка 1» нужно вставить нашу первую фотографию. Я надеюсь, мы ее уже приготовили и поместили в папку images корневой папки, где находится наш сайт. Назовем ее pic_1.jpg
— В названиях файлов нельзя употреблять пробелы, поэтому мы укажем знак «_» нижнее подчеркивание, или «-» минус.
Земеним текст «Строка 1″ на <img src=»/images/pic_1.jpg» alt=»Фото природы» title =»Фото природы»>
В этом выражении alt означает альтернативный текст, т. е. Тот, который будет отображаться вместо картинки, если в браузере посетителя сайта выключено отображение изображений.
Тег title отвечает за вывод подсказки при наведении мышки на картинку.
Еще можно указать название изображения под картинкой. для этого послес трочки вывода изображения поставим <br /> для перехода на новую строку и напишем текст «Фото природы».
Поясню, зачем мы провели все эти действия: Поисковые системы для поиска фотографий используют тэги описания изображения. А если рядом с фото будет стоять текст, соответствующий описанию фотографии, поисковая система сочтет данный рисунок релевантным запросу, содержащим описание фотографии, что поможет в продвижении сайта в топ выдачи поисковых систем. Кроме того, можно попасть в топ поиска по изображениям, что позволит привлечь дополнительный трафик.
— Интересный совет: используйте как минимум три изображения с подписями на страницах сайта. Изображения обязательно должны соответствовать тематике содержимого текста. Современные поисковые системы достаточно умны. В поиске изображений отображается ссылка на Ваш сайт, соответственно, люди могут заинтересоваться этим и перейти к Вам. Благодаря этому можно хорошо продвигать товары в интернет магазине. Хорошее детальное описание фотографии, состоящее из ключевых поисковых запросов, по которым люди должны находить Ваш товар — например, «Фиолетовый холодильник» или «Платье в горошек», или «свадебные букеты».
— Важный совет: используйте защиту фотографий от копирования с умом для раскрутки своего сайта. Размещайте на фотографиях «Водяной знак», ссылку на источник фотографии контрастным к изображению текстом или делайте другую подобную защиту. Это позволит доказать авторское право на изображение, а так же увеличит посещаемость сайта, если люди увидят ссылку на автора фотографии где-нибудь еще.
Вернемся к редактированию текста. Сохраним HTML код и проверим, как все это отображается в браузере.
Теперь мы видим, что появилось изображение нашей первой фотографии.
— Рекомендуется указывать размер фотографии в пикселях, что поможет браузеру точно размечать страницу и изображения никогда не будут выходить за заданные параметры. Для этого добавим к тэгу <img> атрибуты:
height=» » — высота в пикселях и
width=» » — ширина в пикселях.
Укажем ширину нашего заранее подготовленного такой, какая она есть. Пусть, в нашем примере изображение будет размером 300 по ширине и 200 по высоте.
Соответственно укажем:
<html>
<head>
<title>Картинная галерея художника Василия Пупкина</title>
</head>
<boby>
<table border=»1″>
<tr>
<td><img src=»/images/foto.jpg»></td>
<td><h2>Художник Василий Пупкин</h2>
Моя биография… — сюда пишем текст о себе…
</td>
</tr>
</table>
<br /><br />
<table border=»0″ cellspacing=»15″>
<tr>
<td><img src=»/images/pic_1.jpg» alt=»Фото природы» title =»Фото природы»><br />
Фото природы
</td>
</tr>
<tr>
<td>Строка 2</td>
</tr>
<tr>
<td>Строка 3</td>
</tr>
</table>
</body>
</html>
Посмотрим, как измениться фотография, меняя эти размеры, например, ширину 300 поменяем на 500. Вотография растянется по ширине. Благодаря этим приемам — изменению масштабов фото мы можем выводить большие изображения в меньшем размере в окне браузера.
— Если необходимо сделать область одного цвета, или градиентный фон, можно растянуть рисунок, например, шириной 1 пиксель и высотой 20, на нужную величину используя атрибут width. Это может применяться для ускорения загрузки страницы, нет необходимости вставлять дополнительный рисунок.
Теперь добавим другие фотографии подобным образом в наш код.
Мы получили простую галерею изображений. Добавим теперь свои контакты для того чтобы посетители сайта могли связаться с нами. Воспользуемся ссылкой на электронную поту. Для того чтобы вставить ссылку на e-mail пишем следующий код: <a href=»mailto: Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript » title=»Написать письмо»> Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript </a>
— в этом выражении <a> означает открытие тега ссылки, затем идет href=»/ » — адрес ссылки, тег title=» » означает надпись, появляющуюся при наведении на ссылку мыши.
— Обязательно указывайте title для каждой ссылки, благодаря этому страницы, на которые ссылается ссылка приобретут большее доверие у поисковых систем, т. е. содержимое страницы подходит под описание ссылки, поисковая система больше ценит страницы стакими осмысленными ссылками. Добавим еще наш контактный телефон. В итоге у нас получается такой код:
<html>
<head>
<title>Картинная галерея художника Василия Пупкина</title>
</head>
<boby>
<table border=»1″>
<tr>
<td><img src=»/images/foto.jpg»></td>
<td><h2>Художник Василий Пупкин</h2>
Моя биография… — сюда пишем текст о себе…
</td>
</tr>
</table>
<br /><br />
<table border=»0″ cellspacing=»15″>
<tr>
<td><img src=»/images/pic_1.jpg» alt=»Фото природы» title =»Фото природы»><br />
Фото природы
</td>
</tr>
<tr>
<td>Строка 2</td>
</tr>
<tr>
<td>Строка 3</td>
</tr>
</table>
<p>
<a href=»mailto: Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript » title=»Написать письмо»> Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript </a>
<br />
Звоните: 77-888-999
</p>
</body>
</html>
Сохраняем, проверяем. У нас получился простейший одностраничный сайт портфолио с нашими работами. Для того, чтобы его могли увидеть люди, нам необходимо выложить его на хостинг.
© Дмитрий Парыгин, www.itsait.com
Для новичков: как создать свою первую HTML-страничку
Всем привет! В данном коротком видео мы рассмотрим процесс создания первой HТML-страницы. Поговорим о редакторах кода для разных операционных систем, установим Notepad++ на Windows, создадим первый HТML-файл и сможем открыть его в браузере.
Зачем же нужен непонятный редактор кода, если на компе есть замечательные программы типа Microsoft Word или блокнота? Увы, но Word и прочие не подходят: эти программы коверкают код, а блокнот не обладает подсветкой синтаксиса, которая нам сейчас и нужно. Поэтому нужно установить один из редакторов кода (для Windows можно взять Notepad++ либо SublimeText, для Мас и Linux SublimeText тоже подходит, но на Windows лучше начать с Notepad++).
Установка Notepad++
Сейчас рассмотрим установку Notepad++. Заходим в Яндекс, пишем «Notepad++», открываем страничку, нажимаем «download», скачиваем -> появляется NotepadInstaller. [Чтобы создать первую HTML-страничку, нужно владеть компом настолько, чтобы установить себе Notepad++ (нажать 2 раза на installer 🙂 ).] Предупреждений не пугайтесь, программа проверенная, надежная. Язык выбирайте, какой вам удобно, просто нажимайте все время далее, и в итоге установите себе Notepad, который радостно появится у вас в меню «Пуск».
Теперь переходим к нашему первому HTML-документу. Создайте где-нибудь папку, которая будет являться воображаемым корнем нашего сайта, именно там сохраним документы. У кого на компьютере включено расширение для незарегистрированных типов, можно просто создать файл правой кнопкой. Мы же пойдем более топорным способом: просто-напросто откроем Notepad, нажмем «файл» -> «сохранить как» -> выбираем папку (к примеру, папка «сайт» на рабочем столе), а дальше нужно вставить расширение Hyper Text Markup Language. Предупреждение: если вы работаете в SublimeText, то там нет выбора типа файла, но решение просто – введите название этого файла, после него поставьте точку и напишите расширение html.
Таким образом, когда вы пишете «имя файла_точка_html», вы его сохраните хоть из Notepad, хоть из SublimeText, хоть из блокнота. Сохраняем, заходим в папку с файлом. Если у вас не было каких-либо перенастроек ассоциаций файлов в системе, то этот файлик должен отображаться значком браузера. Как проверить, что все прошло хорошо? Просто два раза кликнуть на этот файлик – если он у вас откроется в браузере, то значит на 99% все так, как нужно.
Первый HTML-код. Ура!
Возвращаемся в Notepad++, и пишем какой-нибудь кусочек HTML-кода. Например, тег Н1 – заголовок 1-го уровня – и какую-нибудь радостную фразу, типа «Ура, я сделал первый файл!». Заметьте, в Notepad++ есть дискета, которая никогда не должна быть красной. То есть, когда вы меняете код, сразу же нажимайте «сохранить» (кто не знает горячих клавиш («Ctrl+S»), то просто «файл» –> «сохранить»). После этого зайдите в браузер и обновите страницу. В итоге увидите там что-нибудь радостное и великолепное. Например, на экране может выйти какая-то абсолютная белиберда 🙂 Согласитесь, немного не похоже на то, что было написано.
Это так называемая проблема с кодировками. Чтобы ее не было, вы должны либо подобрать кодировку в Notepad (она, кстати, подобрана правильно, современная), либо сразу прописать тег для HTML. Если у вас возникла проблема с кодировками, то нужно прописать metacharset, название кодировки – и после этого все работает хорошо. Какую писать кодировку – зависит от кодировки, установленной в Notepad. Лучше писать UTF-8, и в Notepad ставить UTF-8. SublimeText тоже по умолчанию должен UTF-8 проставлять.
Для тех, кто более продвинутый и зачем-то смотрит это видео, возмущаясь, что в HTML-документе нет никакой структуры – она здесь и не нужна. Это видео для самых новичков – для тех, кто хочет сделать первый HTML-файл и увидеть какой-то начальный результат.
Итак, подведем итоги. Сделать нужно всего 3 действия: открыть Notepad, написать код, сохранить файл – все, после этого можно его просматривать. Теперь вы умеете делать HTML-файлы, поэтому приятного дальнейшего изучения HTML CSS!
Как создать таблицу в html коде через блокнот?
Автор Дмитрий Костин На чтение 7 мин. Опубликовано
Доброго всем времени суток, мои дорогие друзья. Как лето проходит? Я надеюсь, что у всех всё хорошо. Ну а сегодня мы продолжим изучать основы html и сегодня будет наверное последний урок на эту тему, потому что дальше мы окунемся уже в CSS. Так вот, говоря об html, я не могу не рассказать про таблицы, так как они тоже являются довольно значимой темой.
Взять хотя бы тот же вордпресс. По умолчанию в этом движке нельзя создать таблицу. Нужен либо специальное дополнение (плагин), либо специальный программный код (скрипт). Но можно просто сделать то, что мы хотим с помощью простых тегов. В общем сегодня я вам расскажу как создать таблицу в html, так как это действительно может очень вас выручить.
Помнится мне, как свои первые сайты я верстал с помощью табличной верстки, т.е. шапка, сайдбары, футер и контентный блок были всего лишь элементами таблицы. Об этом я упоминал в своей статье о моем пути в блоггинг. Правда сегодня сайты уже вообще не принято делать с помощью таблиц, но это не значит, что они не нужны. Скорее наоборот.
Что еще хорошо, так это то, что вам даже не придется ничего чертить. Всё делается в обычном блокноте (ну или другом, типа Notepad++), причем довольно легко. В общем давайте настраиваться на работу.
Теги
Здесь разметка происходит несколько сложнее, чем в других тегах, но это всё быстро запоминается. Так что смотрим и не отвлекаемся.
Любая таблица всегда заключается в парный тег <table></table>. Т.е. эти знаки дают команду, что здесь будет располагаться таблица.
Внутри table ставится парный тег <tr></tr>. Данная пара означает, что мы создали одну строку в таблице, и сколько таких тегов будет прописано, столько строк и будет.
Ну а внутри <tr></tr> мы теперь проставляем еще одну пару — <td></td>. Данная пара означает, что мы создали один столбец в данной строке, и если в каждом tr прописать несколько td, то тогда в данной строчке будет несколько столбцов. Понятно? Если нет, то давайте посмотрим на примере, как тут всё устроено… Допустим я хочу создать таблицу учеников и отметок. Тогда пишем следующее внутри тега <body>:
<table>
<tr>
<td></td>
<td>Математика</td>
<td>Русский язык</td>
<td>История</td>
</tr>
<tr>
<td>Медведев</td>
<td>3</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>Смирнов</td>
<td>5</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td>Соколов</td>
<td>3</td>
<td>2</td>
<td>3</td>
</tr>
</table>Что мы здесь сделали? А сделали мы четыре строки (tr), в каждой из которых содержится по четыре таблицы (td). В первом блоке tr мы написали название учебных дисциплин, при этом оставив первый столбец пустым, чтобы не нарушить таблицу.
Далее в каждую первую пару td мы вставляем фамилии учеников, а все остальные td заполняем оценки в соответствующей ячейке. В общем напишите это и сохраните файл, после чего откройте его в браузере, тогда вы сами всё поймете как это происходит.
Но зайдя в документ мы видим, что таблица не совсем похожа на то, что мы планировали. А чего тут не хватает? Правильно — границ. Но вы не переживайте. Об этом я вам расскажу чуть ниже.
Но для приличия я покажу вам еще один тег, который выделяет и центрирует данные в таблицах. Этот тег пишется как <th>. Давайте выделим наши заголовки в таблице. Для этого просто замените теги td, на th в тех местах, где у нас пишутся фамилии и названия дисциплин.
И смотрим, что у нас получится благодаря этому. Как я и говорил, теперь данные названия центрированы и выделены. Этого-то мы и добивались.
В общем с тегами мы вроде разобрались. Хотя есть еще и другие (можете посмотреть на htmlbook), но я не буду заострять на них внимание.
Атрибуты
Естественно такая вещь как таблицы не может обойтись без специальных атрибутов и я вам покажу некоторые из них.
Граница (border)
Ну и начать бы я хотел с того, о чем говорил выше, то бшь о границах. По умолчанию их нет, поэтому таблица выходит невзрачной и не совсем понятной. Но это можно исправить, и поможет нам в этом атрибут border, который ставится непосредственно в открывающий тег <table>. Сделайте так, как я показал вам в примере ниже, то есть поставьте значение атрибута border=»1″.
После того, как вы сделаете это, сохраните результат и запустите документ. Ну что? Совсем ведь другое дело. Теперь таблица приобрела нормальные очертания и выглядит как надо. Вы можете поэкспериментировать с различными значениями бордера и посмотреть, что в вашем конкретном случае наиболее вам подойдет.
Отступ и расстояние (cellpadding и cellspacing)
Совершенно естественно, что одно отображение таблицы на все случаи жизни устроит не всех. Но мы можем это немного изменить, благодаря двум похожим атрибутам.
Cellpadding=»« — изменяет расстояние от самой рамки до содержимого в ячейке. Тем самым все ячейки в таблице становятся больше. Давайте напишем этот атрибут в таблице, а значение поставим равное 5, и посмотрим чем оно будет отличаться от первоначального варианта.
Хоп. Видите? Расстояние увеличилось. таким образом вы сможете сами подставлять нужные значения, расширяя тем самым ячейки.
Cellspacing=»» — изменяет расстояние между ячейкми таблицы и его значения также измеряются с пикселях. Давайте попробуем также поставить этот атрибут со значением равным 5 и увидим, что из этого получится.
Ну что? Суть ясна? Как видите, расстояние между ячейками стало шире. Именно этого мы с вами и добивались.
Выравнивание (Align)
Ну куда же мы без этого замечательного атрибута, который позволяет нам выровнять всё по разным местам? Align работает точно также, как и с другими тегами, которые мы проходили ранее и имеет три значения:
Давайте пропишем каждое из значений и посмотрим, как будет распределяться таблица.
Ну что? Вроде всё работает и я думаю, что должно быть понятно. Но если возникают какие-либо вопросы, то вы не стесняйтесь, спрашивайте.
Ну вот в принципе и всё, что я хотел рассказать сегодня о таблицах. Надеюсь, что вам всё было понятно. Ну а если вы хотите подробно изучить все тонкости работы с HTML и CSS и научиться верстать сайты самостоятельно, то я вам настоятельно рекомендую посмотреть превосходнейший видеокурс на данную тему. Для новичка это самый понятный, как по мне, видеокурс, в котором вам просто всё разжуют и разложат по полочкам.
Ну а я свой урок на сегодня завершаю. Не забывайте подписываться на обновления моего блога, чтобы не пропустить какую-либо важную информацию или новости. А мы с вами увидимся в других статьях. Удачи вам и пока-пока!
С уважением, Дмитрий Костин.
Как создать html страницу в блокноте?
Создание собственного веб-сайта не покажется таким сложным, каким кажется на первый взгляд, если разобраться в основах языка HTML и создать самую простую веб-страницу в обыкновенном блокноте, который есть на каждом компьютере. Именно с создания HTML-страниц в блокноте все веб-программисты начинали учиться сайтостроению, и вы тоже можете освоить эту несложную науку. Создать сайт самостоятельно с Wix.comИнструкция
используйте для переноса текста на строку ниже, а тег и используйте для определения заголовка страницы. Важным тегом является — в нем должно содержаться тело документа.
и выровняйте его с помощью параметра align со значениями left, center, right, justify. По умолчанию все тексты в HTML выравниваются по левому краю. Некоторые особенно важные моменты и заголовки выделите жирным шрифтом, заключив часть текста в теги . Для того чтобы сделать текст наклонным, заключите его в теги .
Как создать веб-сайт с помощью HTML в Блокноте
Как создать веб-сайт с помощью HTML — не проблема, потому что это очень просто и легко. Вы можете создать HTML-сайт, используя HTML в блокноте. Если вы хотите создать веб-сайт в формате HTML, мы научим вас, как это сделать, с помощью простых шагов. Мы создадим таблицу в HTML, чтобы внести коррективы в макет, чтобы мы могли проектировать веб-сайт, используя желаемый результат.
Давайте создадим файл, выполнив шаги
Шаг 1. Создание файла HTML
Откройте на своем компьютере текстовый редактор (Блокнот) и создайте новый файл.Мы предлагаем вам использовать Блокнот (в Windows), TextEdit (на Mac) или какой-нибудь другой простой текстовый редактор, например Notepad ++, VS Code и т. Д.
Не используйте Wordpad или Word для этого.
Шаг 2. Введите код HTML.
Начните с основного синтаксиса HTML и расслабьтесь перед написанием кода, не будьте слишком быстрыми и не паникуйте.
Шаг 3. Добавление фонового изображения
Добавьте фоновое изображение в тег body, используя его атрибут background.
Шаг 4: Создайте таблицу
Теперь создайте таблицу в соответствии с потребностями столбцов и строк для создания макета.При необходимости сделайте colspan, rowspan.
Шаг 5: Content Sattlement
Когда закончите с макетом, напишите в нем свой текст и вставьте изображения / логотипы на свой веб-сайт в любом месте.
Шаг 6: Сделайте его привлекательным
Когда весь контент написан, разработайте его с учетом цвета, размера и стиля шрифта, чтобы сделать его привлекательным.
Здесь мы создаем html-код веб-сайта, документ
Документ
TechnoBrainz.in
На главную
О нас
Свяжитесь с нами
Добро пожаловать на наш сайт
технобрейнц.в
Подпишитесь сейчас
Спасибо, что посетили