Сделать сайт html — в блокноте, программа, с нуля, теги, код
Как сделать сайт html?
Такой вопрос задают пользователи, которые решили самостоятельно создать web ресурс.
Начинающие веб-мастера, решившие научиться делать сайты с нуля, пробуют искать информацию на просторах сети интернет или в учебных пособиях. В результате, они понимают, что без знаний языка html создать полноценный проект невозможно.
А все дело в том, что язык разметки гипертекста html специально разработан для того, чтобы было удобно создавать web – страницы. И не имея элементарных знаний html достаточно нелегко ее создать.
Но бывают ситуации, когда совсем нет времени на изучение основ html, а сайт создать, ну просто, необходимо. Возможно ли сделать интернет-ресурс самому с помощью какого – либо сервиса или программы?
Как создать страницу html
Чтобы ответить на поставленный вопрос, прежде всего, необходимо определить, какие минимальные действия надо произвести, чтобы в Интернете появился сайт.
А на самом деле, потребуется всего лишь:
- Создать web-страницу в виде файла (электронного документа) определенного формата. Если быть более точным – это должен быть файл index с расширением .html или .htm.
- Страница должна находиться в интернете с открытым постоянным доступом и размещаться на специальном сервисе.
Для начала ее можно разместить на бесплатном хостинге, регистрация на котором занимает не более пяти минут. В интернете таких сервисов более, чем достаточно. Можно просто набрать в поисковике запрос: «бесплатный хостинг» и из предложенного списка выбрать наиболее подходящий. После чего надо будет пройти регистрацию.
Ну что ж, с размещением сайта, надеюсь, проблем не возникло.
Как сделать страницы сайта в Word
Можно создать интернет страницу, даже с помощью текстового редактора Word, которым владеет практически каждый пользователь компьютера. Для этого пишем статью, добавляя рисунки, графику.
Короче, все те элементы, которые сделают статью интересной.
В итоге, после того, как контент готов, оформляем дизайн таким образом, в каком виде нам бы хотелось видеть сайт в интернете.
Затем запись надо сохранить. Для этого, в меню редактора Word надо выбрать «Сохранить как». Откроется диалоговое окно, надо дать имя документу (index.html) и выбрать расширение веб-страница.
Далее: нажимаем «Сохранить».
В результате, мы получили веб-страницу. Теперь, когда мы закачаем созданный файл на хостинг, все желающие смогут увидеть сайт в интернете.
Данный способ создания интернет страниц имеет большой недостаток:
Word генерирует много лишнего кода html. Поэтому этот способ создания сайтов распространения не получил.
Как сделать сайт html в Блокноте
Гораздо удобнее и правильнее будет сделать страницу в Блокноте. Это стандартная программа для Windows.
Для начала потребуется прописать структуру HTML документа, которая имеет следующий вид:
<html></html> — теги, определяющие начало и конец документа;
<head></head> — ответственные за заголовок данной страницы;
<title></title> — теги, прописывающие название сайта;
<body></body> — прописывается код сайта.
Пример структуры
В первой строчке документа прописана версия языка html.
Пропишем данный код в Блокноте и сохраним в формате .html. Затем откроем в любом браузере и если все верно — увидим пустую страницу.
Создание дизайна
После этого надо будет определить дизайн сайта: место для шапки, положение меню, где будет располагаться текст.
Я выбрала такой макет: в верхней части сайта – шапка, под ней 4 кнопки, меню – слева и текст – справа.
Чтобы создать такой сайт, необходимо сделать разметку с помощью таблиц.
Разметка
На языке html таблица определяется тегами <table></table>, а строка в ней — <tr></tr>, столбцы — <td></td>.
Таблица будет иметь следующий вид:
Где:
8 и 33 строки открывают и закрывают таблицу;
14 и 21 — открывают и закрывают строку в данной таблице;
15, 16, 17, 18 – открывают и закрывают столбец;
22 и 25 строки — открывают и закрывают столбец.
При этом атрибут colspan=”1” – количество столбцов, width=”170” и height=”317” – ширина и длина ячейки;
27 и 30 — опять открывают и закрывают столбец. В данном случае атрибут colspan=”3” — ячейка растягивается на 3 столбца. Ее размеры составляют: width=”510” и height=”317”.
Таким способом и происходит создание страницы с помощью таблиц.
Если убрать в 8-ой строке атрибут border=”1”, то таблица станет невидимой, что мы и сделаем.
Создание шаблона сайта с помощью программы
Чтобы сделать шаблон нам потребуется программа Adobe Photoshop. Открываем ее и создаем новый документ «Файл» — «Новый». Указываем ширину, высоту, разрешение, цветовой режим, фон.
Прописываем все так, как показано здесь:
Откроется пустой документ. Теперь надо сделать подобно тому, как в документе .html. Разбиваем его на ячейки таблицы, используя направляющие.
Для отображения линейки, включаем ее «Просмотр» — «Линейки» и прямо с линейки вытаскиваем направляющие и создаем шаблон, как на рисунке:
Добавление фона
Для большей наглядности выбираем фон нашего сайта и закрасим его, например, зеленоватым.
Для этого необходимо в Photoshop создать новый слой, кликнув на панели инструментов «Палитра цветов» и прописываем тот оттенок, который мы выбрали.
Зажмем горячие клавиши Alt + Backspace и документ окраситься в тот цвет, который мы указали. Таким способом можно выбирать любой фон.
Навигация
Продолжим делать сайт в html. Теперь надо разметить меню сайта, шапку, кнопочки и т.д.
Создадим новый слой, для чего берем инструмент «Прямоугольная область». Выделяем шапку сайта и, зажав клавиши Alt + Backspace, закрашиваем шапку. Затем нажимая Ctrl + T один раз, зажав клавишу ALT, уменьшаем шапку.
Должно получиться что-то на подобие:
Похожим образом, делаем и другие области сайта. Можно изменить цвет, сделать рамку у блоков, добавить тень, наложить градиент. Для этого выделяем слой с зажатой клавишей Ctrl и используем функции Photoshop.
Выбираем необходимую функцию, например: обводка. Указываем ее размер в пикселях и цвет.
Подобным образом создаем другие элементы на сайте.
На кнопочках прописываем названия, можно прописать и в html, а можно сразу сделать графичные кнопки. Выбираем инструмент «Текст» и делаем надписи. Например: Главная, Услуги, Контакты и т.п.
Оформление шапки
Добавляем картинку в шапку сайта и простым перетаскиванием картинки, размещаем ее в верхнем блоке сайта. Изменить размер изображения можно с помощью Ctrl + T.
В итоге получим готовый шаблон сайта:
Разрежем шаблон на части и сохраним все в отдельной папке в нужном формате.
Берем инструмент «раскройка» и выделим каждую область сайта.
Все сохраняем. Идем в меню, выбираем «Файл» —> «Сохранить для Web». Сохраняем в формате .jpeg или .png.
В итоге: на рабочем столе – папка с готовыми блоками будущего сайта. Перенесем эти файлы в нашу папку с сайтом.
Верстка сайта на html
Переходим к самому главному – созданию html страницы. На этом этапе надо разместить все части шаблона в документе, добавить текст для главной страницы, прописать меню и т.
д.
Ниже приводится окончательный результат:
Я думаю, что здесь не сложно разобраться, что к чему.
10 строка – прописываем шапку сайта атрибутом background;
15, 16, 17, 18 – вставляем кнопки и прописываем ссылки;
22 строка – прописываем фон меню атрибутом background;
23 – 28 строчки – прописываем пункты меню сайта;
33 строка – текст сайта.
Оказывается, что ничего сложного в создании сайта на html нет.
В итоге мы узнали, как сделать сайт в html.
Вот и все, наш сайт готов!
Да, это, конечно, простая страница, созданная на html.
Но вы уже знаете, как делается шаблон и верстка, а значит можете приступить к изучению более сложных способов усовершенствования сайта.
Попробуйте и начните с малого, и если вы научитесь создавать простые страницы, со временем вы сможете создать нечто большее. Самое главное – не бросайте обучение, тогда в скором времени вы научитесь создавать профессиональные сайты.
Рекомендую:
Как самому сделать сайт
Как создать сайт в блокноте – азы HTML-верстки
Привет, друзья! В этой статье я хочу познакомить вас с основами HTML. Конечно, сейчас существуют десятки конструкторов, позволяющих делать готовые сайты и даже не заглядывать в код страницы. Однако если вы хотите шагнуть в карьере сайтостроителя чуть выше уровня новичка, то создание сайта в блокноте не должно быть для вас тайной за семью печатями.
Содержание
Что такое HTML.Как создать сайт в блокноте
Прежде чем открыть «Блокнот» и создать свою первую веб-страницу, нужно понять, с чем именно придется иметь дело. HTML – это язык разметки документа, который сделал интернет таким, как мы привыкли его видеть. В HTML используют теги – команды, которые описывают структуру веб-страницы. Заключают их в угловые скобки <тег> – так браузер может отличить команды от всей массы текста.
Каждый тег является парным. Сначала нужно поставить открывающий тег, после внесения информации – закрывающий. Выглядят они одинаково, за исключением знака «/», который ставится в закрывающем теге: <тег>…</тег>.
Любая страница состоит из тегов. Нажмите правой кнопкой мыши на открытой странице сайта в браузере и выберите пункт «Исходный текст страницы». В открывшейся вкладке вы увидите, что картинок, всплывающих окон и ярких заголовков там нет. Лишь полотно кода, который и формирует визуальную и функциональную составляющую веб-сайта.
У вас может возникнуть логичный вопрос: зачем все усложнять, учить HTML, ведь есть простые визуальные редакторы? У написанных от руки веб-страниц есть несколько преимуществ:
- «чистый» код хорошо влияет на поисковую оптимизацию сайта;
- веб-страницы быстро загружаются;
- легко вносить любые изменения в сайт;
- возможность реализации любых задумок – движки же всегда накладывают определенные ограничения.
Разобраться в HTML намного проще, чем вы себе представляете. Достаточно понять лишь логику происходящего, выучить основные теги, а дальше все пойдет как по маслу. Не сомневаюсь, что процесс написания вас увлечет! Наблюдать, как из полотна текста возникает готовый сайт – потрясающее занятие.
Как пишутся сайты в блокноте
Создание сайта через блокнот начинается буквально с чистого листа. Основой любого сайта является следующая структура:
<html>
<head>
<title>Название моего первого сайта</title>
</head>
<body>
Содержимое моего сайта.<br>Я учусь писать сайт в блокноте.
</body>
</html>
Попробуйте вставить этот текст в новый файл .txt. После этого зайдите в меню «Сохранить как» и сохраните в формате index.html. Указывать расширение «.html» обязательно. Таким образом вы сохраните страницу не в виде текстового документа, а в виде веб-страницы. При сохранении не забудьте поменять кодировку с ANSI на UTF-8.
Также порекомендую создать отдельную папку для будущей веб-страницы. Назовите ее, например, «site».
Зайдите в папку, куда вы сохранили документ .html и кликните два раза мышкой на нем. Результат ваших стараний откроется в браузере. В итоговом варианте будет виден только текст. Отображается информация, заключенная между тегами <body>. Обратите внимание, что текст, помещенный между тегами <title>, виден в названии страницы, а имя документа – в адресной строке.
Изменения в страницу вносятся в блокноте. Хотите увидеть, что получилось, снова откройте документ в браузере. Допустим, мы умножим нашу радость от обучения основам HTML и между тегами <body> добавим следующий текст: «Скоро я стану очень крутым мастером верстки!!!». Сохраняем документ и открываем его в браузере.
Конечно, это только первый шаг в создании полноценного сайта. Однако я показал вам основу: как пишется код в блокноте, что очень важно для дальнейшей работы. Чтобы сделать работу сайта полноценной, необходимо освоить и php.
Как код превращается в красивую веб-страницу.Как создать сайт в блокноте
Создание сайта с помощью блокнота сопровождается еще одним важным этапом: подготовка структуры страницы. Необходимо продумать, из каких элементов будет состоять ваш шаблон. Вероятнее всего, там будет «шапка», боковая колонка, часть с основным содержимым, «подвал». Все элементы необходимо вписать между тегами <body>, заключив в один блок, обозначаемый тегом <div>.
Выглядеть это будет следующим образом:
<html>
<head>
<title>Название моего первого сайта</title>
</head>
<body>
<div id = «main»>
<div id = «header»>Здесь будет шапка</div>
<div id = «sidebar»>Это будет боковая колонка</div>
<div id = «content»>Это — контент</div>
<div id = «footer»>Это подвал</div>
</div>
</body>
</html>
А в результате получаем следующее.
Теперь приступим к «украшательству» сайта. Для этого в папку, где хранится файл index.html, нужно добавить еще один текстовый документ. Но сохранить его нужно в формате site.css. И про кодировку UTF-8 тоже не забудьте.
Что такое CSS.Как создать сайт в блокноте
CSS – это стили оформления HTML-страниц. Каждый тег, заключенный в <body>, имеет набор свойств: цвет, размер, положение на странице и т.д. Это и есть стили CSS, которые прописываются в файле site.css. А чтобы они отобразились на создаваемой странице, необходимо указать в файле index.html путь к искомому документу.
Итак, в файле site.css пропишите такой код:
div{
color:#eeab54;
font-size:46px;
font-weight:700;
}
Сохраните, теперь откройте файл index.html в блокноте. Чтобы оформление отобразилось на создаваемой странице, необходимо между тегами <head> вписать следующее: <link rel=»stylesheet» href=»site.css»/>. Название файла, где хранятся стили, заключается в кавычки после тега href.
Сохраните, откройте в браузере страницу и увидите, что текст стал совершенно другим.
Подобным образом к странице подключаются скрипты. Создается отдельный файл с расширением script.js, куда вписывается код. Ссылка на файл со скриптом указывается в исходном файле веб-страницы.
Теперь я могу вас поздравить! Вы научились управлять своим сайтом и смогли понять, какие безграничные возможности открывает перед вами HTML. И вам не нужно учить сотни тегов. Основные вы быстро запомните. Готовые стили и скрипты можно найти в интернете, вам не нужно учиться писать их самому. Главное, понять структуру страницы – что за чем следует. Согласитесь, это не сложно и весьма увлекательно!
Кстати, я нашел для вас шикарный курс по HTML. Рекомендую воспользоваться, если создание сайта в блокноте захватило вас также, как и меня! Если понадобятся советы по написанию сайта, заглядывайте в мой блог. Я готовлю еще немало интересных материалов. Подписывайтесь на обновления и до новых встреч!
HTML Cheat Sheet [обновлено] — Скачать PDF для быстрого ознакомления
Содержание
HTML расшифровывается как язык гипертекстовой разметки Используется для: создания веб-страниц (документов), которые отображаются в мире Широкая сеть (веб-сайты).
Страницы могут представлять собой смесь текста, изображений, видео и других элементов. Его можно создать с помощью: блокнота, TextPad или любых текстовых редакторов.
Сохранено как: файлы .html
HTML-шпаргалка
Здесь мы делимся с вами полной HTML-шпаргалкой:
Базовая структура
<голова><название> <тело> теги тела и основной контент
Основными элементами HTML являются теги. Теги структурируют и представляют данные в различных формах.
Заголовок
Заголовок 1
Заголовок 2
Заголовок 3
Заголовок 4
Заголовок 5
Заголовок 6
Абзац
написать абзац
Атрибут style можно использовать сдля отображения текста внутри
определенным образом. Например,
Я буду голубым
Выделение синим цветом
разрыв строки
Span
Тег Span используется для стилизации встроенных элементов.
Адрес
— печатает слово «Адрес» указанным цветом (здесь зеленым). Атрибут стиля используется для стилизации HTML-элементов.
символов
- – пробел (неразрывный)
- " — добавить кавычку («)
- < — меньше символа (<)
- > — больше символа (>)
- & — символ «&» или амперсанд
- &копия; — символ авторского права
- &торговля; — товарный знак
Форматирование
- Жирный шрифт
- Курсив
- подчеркнутый текст
- Я выделен желтым цветом — выделяет текст желтым цветом. Если нужны другие цвета, используется span.
- Я выделен розовым цветом
- Я сильный — выделить тот или иной текст; в основном полужирный
- — выбранный шрифт для текста
- Шрифт не используется в HTML 5, используется CSS. Атрибуты <шрифт> —
-
— семейство шрифтов, например Courier New - <размер> — размер текста
- <цвет> — цвет текста в шестнадцатеричном формате (например, #FF000F) или текста (например, красный)
- — меньший текст, мелкий шрифт
-
Зачеркнуть— зачеркнуть текст внутри тега - — верхний индекс (текст над обычным текстом, например экспоненциальные числа)
- — индекс
- — выделение
- — предварительно отформатированный текст
- — печатный текст
Атрибуты <шрифт> —Body
— основное содержимое лежит в теле. Внутри может быть много разделов. Атрибуты –- background=»» — Источник фонового изображения; можно оставить пустым, если нет изображения
- bgcolor=»» — Цвет фона в шестнадцатеричном формате
- text=»» — цвет текста страницы
- ссылка = «» — Цвет ссылки
- alink=»» — Цвет активной (текущей) ссылки
- vlink=»» — Цвет посещенной ссылки
- bgproperties=»» — Свойства фона. Значение «фиксированное» означает водяной знак без прокрутки .
- верхнее поле = «?» — Размер верхнего поля в пикселях
- leftmargin=»» — Размер бокового поля в пикселях
Значение «фиксированное» означает водяной знак без прокруткиМетаданные
Тег является частью и описывает информацию о данных. Чаще всего метаданные используются поисковыми системами для ключевых слов. — наиболее распространенный набор символов Атрибуты —
- имя = «» —
- content = «» — значение, соответствующее вышеуказанным именам
Пример —
Разделы и разделы
- новый раздел; вложенные теги div очень распространены, когда требуется несколько подразделов
-
— горизонтальная линия
имеет следующие атрибуты –
- размер – толщина линии в пикселях
- ширина — в пикселях или процентах (любая)
- цвет – цвет в шестнадцатеричном формате
- выравнивание – выравнивание ; слева, справа или по центру
Столы
<стол><тд> <тд> <тд> <тд> <тд> <тд>
- <таблица> — создает таблицу,
-
— создает строку, — создает столбец, — создает столбцы заголовков Атрибуты
–
- border=»» — Толщина внешней границы в пикселях
- bordercolor=»» — Цвет границы в шестнадцатеричном формате
- Cellspacing=»» — Расстояние между ячейками в пикселях
- cellpadding=»» — Пробел между границей ячейки и содержимым
- align=»» — Выравнивание по горизонтали; слева, справа, по центру
- bgcolor=»» — Цвет фона, шестнадцатеричное значение
- width=»» — Ширина таблицы в пикселях или %
атрибуты - colspan=»» — Количество столбцов, которые охватывает ячейка
- rowspan=»» — Количество строк ячеек в диапазоне
- width=»» — ширина ячейки в пикселях или %
- height=»» — высота ячейки в пикселях или %
- bgcolor=»» — шестнадцатеричное значение цвета фона для ячейки (столбца)
- align=»» — Горизонтальное выравнивание; слева, в центре, справа
- valign=»» — Вертикальное выравнивание; верх, середина, низ
-
— я используются для определения атрибутов для определенных столбцов таблицы.
Пример –
<колл. промежутка = "1"> <столбец> Первый столбец будет выделен зеленым цветом, тогда как остальные столбцы будут выделены синим цветом.
Формы (HTML-шпаргалка)
Большая часть динамического содержимого, такого как пользовательский ввод, отправка страницы, заполнение формы, происходит внутри этого тега. Это группа связанных входов.
<форма> <ввод> <выбрать><опция> <текстовое поле>
Атрибуты тега
- action=»url» — URL-адрес назначения при отправке формы
- method=»» — метод формы — получить, отправить
- enctype=»» — тип кодировки; для загрузки файла это «multipart/form-data»
Атрибуты тега –
- type=»» — Обязательный ввод Тип поля: текст, пароль, флажок, отправить и т.
- name=»» — Имя поля формы (обязательно для обработки формы)
- value=»» — значение (вводится пользователем) или значение по умолчанию
- размер=»» — размер поля
- maxlength=»» — Максимально допустимая длина данных поля ввода
- отмечен — Пометить выбранное поле флажком (множественный выбор) или переключателем (одиночный выбор)
— Выберите параметры из раскрывающегося списка Тег
- name=»» — Имя выпадающего списка; обязательно для обработки формы
- size=»» — s размер выпадающего списка
- множественный — Разрешить множественный выбор
— отдельные элементы выпадающего списка Тег
- value=»» — Выбрано значение опции или установлено значение по умолчанию
- — большая область для ввода текста
