Как написать HTML-страницу (с картинками) - Чаевые

Видео: Уроки HTML 1. Создание html страницы

Содержание

Шаги
Часть 1. Как я открыл для себя HTML
Совет
Предупреждение
Что вам нужно

HTML (язык разметки гипертекста) - это базовый язык для создания веб-страниц. Он был создан как простой и гибкий язык программирования. Почти каждый веб-сайт в Интернете разрабатывается с использованием той или иной формы этого кода (ColdFusion, XML, XSLT). HTML легко понять, но вы можете изучать его в течение долгого времени, если вас интересует его всеобъемлющая функциональность. Чтобы добавить красок и веселья на свой веб-сайт, вы можете изучить основы CSS, как только вы привыкнете к базовой HTML-странице.

Шаги

Часть 1 из 4: Создание документа

Откройте простой текстовый редактор. NotePad - хороший вариант, его можно скачать бесплатно. Вы можете писать HTML с помощью большинства текстовых редакторов, но более сложное программное обеспечение с возможностями автоматического форматирования может затруднить организацию вашей HTML-страницы.
- Не используйте TextEdit, поскольку он обычно сохраняет файл в формате, который ваш браузер может не распознать как HTML.
- Вы также можете использовать онлайн-редактор HTML. Специальные программы редактирования HTML не рекомендуются новичкам.
Сохраните файл как веб-страницу. Выберите Файл → Сохранить как в меню вверху. Измените формат файла на «Веб-страница», «.html» или «.htm». Сохраните файл там, где его будет легко найти.
- Между этими тремя вариантами нет разницы.
Откройте файл в браузере. Дважды щелкните файл, и он автоматически откроется в вашем браузере как пустая веб-страница. Кроме того, вы можете открыть браузер, например Firefox или Internet Explorer, а затем использовать «Файл» → «Открыть файл», чтобы выбрать документ.
- Этого веб-сайта нет в сети. Его можно просмотреть только на вашем компьютере.
Обновите веб-страницу и просмотрите внесенные изменения. Введите в пустой документ следующее: Здравствуйте. Сохраните документ. Обновите пустую веб-страницу в своем браузере, и вы должны увидеть слово «Hello», выделенное жирным шрифтом, вверху страницы. Всякий раз, когда вы хотите протестировать свой новый HTML во время этого руководства, сохраните документ .htm, а затем обновите окно браузера, чтобы увидеть, как компилируется HTML.
- Если вы видите слова ""а также"'' Появляется в вашем браузере, файл неправильно скомпилирован в HTML. Попробуйте другой текстовый редактор или другой браузер.
Выучите теги. Команды HTML записываются в «теги», которые сообщают браузеру, как компилировать и отображать вашу веб-страницу. Они всегда пишутся в одинарных кавычках
, и не отображаются на веб-странице, как вы использовали их в примере выше:
- это «стартовая карта» или «открывающая карта». Все, что написано после этого тега, будет обозначаться как «полужирный» (жирный на веб-странице).
- это «конечный тег» или «закрывающий тег», который можно отличить по символу / знаку. Обозначает конец полужирного текста. Большинству (не всем) тегов для работы нужен закрывающий тег, поэтому обязательно включите его.
Создайте свой документ. Удалите все в своем HTML-документе. Начните со следующего текста, в точности так, как он был написан (без маркированного списка). Этот HTML-код сообщает браузеру, какой тип HTML вы используете, и что весь ваш HTML-код будет помещен внутри тегов. а также .
Добавьте теги головы (головы) и тела. Документы HTML разделены на две части. «Верхний» раздел предназначен для специальной информации, такой как заголовок страницы. Раздел «body» содержит основное содержимое страницы. Добавьте оба этих раздела в свой документ и не забудьте включить закрывающие теги. Новый добавленный текст выделен жирным шрифтом:
Дайте своей странице заголовок. Большинство карточек в разделе "Голова" неважно изучать с новичком. Тем не менее, тег заголовка прост в использовании и определяет, что будет отображаться как имя окна браузера или на вкладке браузера. Поместите начальный и конечный теги заголовка внутри тегов заголовка и напишите любые заголовки, которые вам нравятся, между этими тегами:
- Моя первая HTML-страница.
рекламное объявление

Часть 2 из 4: Форматирование текста

Добавьте текст к своему телу. В этом разделе мы будем работать только с тегами body. Другой текст по-прежнему будет в вашем документе, но мы сэкономим место, не повторяя его в этом руководстве. Напишите все, что хотите между карточками а также , и он появится как первый контент на вашей странице. Например:
- Я выполнил инструкции wikiHow, чтобы написать HTML-страницу.
Добавьте заголовки к тексту. Организуйте свою страницу с помощью тегов заголовков, которые предписывают браузеру отображать текст между ними с большим размером шрифта. Эти теги также используются поисковыми системами и другими инструментами, чтобы определить, о чем ваш сайт и как он организован.

является самым большим заголовком, и вы можете создавать заголовки меньшего размера до

. Попробуйте их у себя на странице:
- Добро пожаловать на мою страницу.
- Я выполнил инструкции wikiHow, чтобы написать HTML-страницу.
- Моя цель сегодня:
- Достигнутые цели:
- Узнайте, как использовать заголовки.
- Незавершенные цели:
- Подробнее о тегах форматирования текста.
Подробнее о тегах форматирования текста. Вы уже видели тег «strong», но существует множество других способов форматирования текста. Попробуйте использовать эти теги или сразу несколько тегов для одной и той же текстовой строки. Не забудьте добавить конечные теги сзади!
- Важный текст, выделенный в браузере жирным шрифтом.
- Выделенный текст, отображается курсивом в браузере.
- Текст немного меньше обычного. Этот текст автоматически изменит размер, если он используется в заголовке.
- ~~Текст больше не актуален, отображается с черточкой.~~
- Текст вставляется позже, чем другие документы, отображается с подчеркиванием.
Организуйте текст на своей странице. Возможно, вы заметили, что нажатия клавиши «Enter» недостаточно для отображения текста в другой строке. Эти теги могут помочь вам создать абзацы и разрывы строк или упорядочить текст другим способом:
- Сокращенно от «абзаца», тег (абзац) сохранит весь текст между этими тегами в абзаце и отделит его от текста над и под ним.
- Этот тег будет генерировать разрывы строк. Не добавляйте к нему закрывающий тег, так как он не мешает другому контенту. Используйте этот тег в стихах или адресных строках, а не в абзацах.
- ```
Если вам нужно отобразить текст очень точно, этот тег устанавливает для текста внутри него шрифт фиксированной ширины (каждая буква имеет одинаковую ширину) и позволяет создавать интервалы Пробелы и разрывы строк, как вам нравится, для обычного редактирования вместо тегов.
```
- Этот тег определяет тип текста, который будет снова цитироваться из источника.
  Вы можете описать источник позже с помощью цитировать карточку.
Добавьте невидимый текст подписи. Теги комментариев не отображаются на веб-странице. Они позволяют добавлять аннотации в HTML-документ, не затрагивая его содержимое. Не добавляйте закрывающий тег.
- Карточки, которые идут одни без конечных тегов, называются «пустыми тегами».
Соедините их вместе. Лучший способ запомнить эти теги - использовать их на своем веб-сайте. Вот пример использования карточек в шагах, которые вы уже изучили. Попробуйте предсказать, как они появятся в браузере, затем скопируйте их в свой документ и узнайте.
- Моя первая HTML-страница.
- Добро пожаловать на мой сайт.
- Надеюсь, вам понравится эта страница!
  Я сделал это только для тебя.
- Часть 1. Как я открыл для себя HTML
- Я выучил HTML уже в ~~один~~ двачасов, так что теперь я эксперт.
рекламное объявление

Часть 3 из 4: Добавление ссылок и изображений

Узнайте об атрибутах. Теги могут содержать дополнительную информацию, записанную внутри них, называемую атрибутами. Эти атрибуты представлены дополнительными словами внутри самих тегов в форме название свойства = "конкретное значение". Например, любой тег HTML может иметь атрибут title:
- Вводный абзац здесь.
  Назовите абзац «Введение», который появится при наведении курсора на абзац на веб-странице.
Ссылки на другие сайты. Использование карт для создания гиперссылки на любую другую веб-страницу. Вставьте URL-адрес веб-страницы, на которую нужно ссылаться, используя атрибут href. Вот пример ссылки на читаемую вами веб-страницу:
- Посетители вашего веб-сайта могут щелкнуть этот текст, чтобы перейти по ссылке.
Добавьте к тегу атрибут id. Другой атрибут, который может использовать любой HTML-тег, - это элемент «id». В любой карточке напишите id = "vidu" или используйте любое имя, не содержащее пробелов. Это не дает видимого эффекта, но мы воспользуемся им на следующем шаге.
- Например, добавьте в свой документ следующее:
  Этот абзац используется в качестве примера для описания работы атрибута id.
Ссылка на элемент с определенным идентификатором. Теперь мы можем использовать тег гиперссылки, , чтобы создать ссылку на другое место на той же странице. Вместо URL-адреса мы будем использовать символ #, за которым следует значение id, на которое мы хотим создать ссылку. Например, Этот текст свяжет текст с идентификатором "vidu".
- Все значения HTML чувствительны к регистру. «#VIDU» и «#vidu» будут ссылаться на одно и то же место.
- Если ваша страница достаточно короткая, чтобы отображать всю страницу сразу, вы, вероятно, ничего не заметите, щелкнув ссылку в браузере. Измените размер окна, пока не появится полоса прокрутки, а затем повторите попытку.
Добавить фотографии. Карта - пустой тег, то есть конечный тег не требуется. Вся информация, необходимая браузеру для отображения изображения, добавляется с помощью атрибутов. Вот пример отображения логотипа wikiHow с описанием каждого атрибута позади:
- Свойства src = "" сообщает браузеру, где находится фотография. (Обратите внимание, что публикация фотографии с чужого сайта считается неуместной - и фотография исчезнет, когда страница перестанет быть активной.)
- Свойства style = "" Он может делать многое, но, что наиболее важно, он используется для установки ширины и высоты изображения в пикселях. (Вместо этого вы также можете использовать отдельные атрибуты width = "" и height = "", но это может привести к странным проблемам с изменением размера, если вы используете CSS.)
- Свойства alt = "" - краткое описание изображения, которое увидит пользователь, если его не удалось загрузить. Это считается обязательным, поскольку используется для чтения с экрана для слепых посетителей сайта.
рекламное объявление

Часть 4 из 4. Узнайте больше о добавлении и переводе вашего веб-сайта в Интернет

Подтвердите свой HTML. Проверка HTML проверяет ваш код на наличие ошибок. Если ваш сайт отображается неправильно, проверка может помочь вам найти ошибку, которая вызывает проблему. Он также может научить вас больше об HTML, определив, что код хорошо выглядит на дисплее, но это больше не рекомендуется из-за новых обновлений в стандарте HTML. Использование недопустимого HTML не делает ваш сайт бесполезным, но может вызвать проблемы или нестабильное отображение в разных браузерах.
- Попробуйте бесплатную онлайн-службу проверки от W3C или найдите другой инструмент проверки HTML 5 в Интернете.
Узнайте больше тегов и атрибутов. Есть много других HTML-тегов и атрибутов и много мест, где можно их изучить:
- Попробуйте w3schools и HTML Dog для получения дополнительных руководств и полных списков тегов.
- Найдите веб-страницу, которая вам нравится по внешнему виду, а затем воспользуйтесь функцией браузера «Просмотр исходного кода страницы», чтобы получить HTML-код самостоятельно. Скопируйте его в свой документ и изучите, как он работает.
- Прочтите другие статьи и узнайте, как создавать таблицы в HTML, использовать метатеги, чтобы повысить ваши шансы быть найденными поисковыми системами, или использовать разделение. установить область на странице) и span (используется для указания стиля текстового элемента) для облегчения стиля с помощью CSS.
Разместите свой сайт в Интернете. Выберите службу для размещения вашего веб-сайта, а затем вы сможете загрузить столько HTML-страниц, сколько захотите, в свой личный веб-домен. Для этого вам нужно будет использовать программное обеспечение для загрузки по FTP, но многие службы проката через Интернет также предлагают эту услугу.
- При ссылке на страницы или изображения, которые находятся непосредственно на вашем сайте, вам нужно будет использовать полный адрес. Например, если ваше доменное имя www.chuyengiahtmlsieudang.com, то текст в этих тегах будет ссылка на "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"
Добавляйте стили с помощью CSS. Если ваша HTML-страница выглядит немного монотонной, попробуйте изучить основы CSS, чтобы добавлять цвета, различные шрифты и лучше контролировать расположение элементов. Связывание «таблицы стилей» CSS со страницей HTML позволит вам на лету вносить радикальные изменения, динамически корректируя стиль всего текста в заданном теге. Вы можете немного поиграть с базовым слоем форматирования здесь или покопаться, чтобы получить более подробные уроки в Учебнике HTML Dog по CSS.
Добавьте JavaScript на свой сайт. JavaScript - это язык программирования, используемый для добавления большого количества функций к вашим HTML-страницам. Команды JavaScript вставляются между начальным и конечным тегами. , и может использоваться для добавления интерактивных кнопок, вычисления математических задач и многого другого. Узнайте больше в примерах w3c. рекламное объявление

Совет

Объявление doctype (используемое объявление типа документа), используемое в этом руководстве, представляет собой "свободный переход HTML 4.0.1" (HTML 4.0.1 не плотный переход), простой формат. для новичков в использовании. Используйте () в качестве альтернативы браузеру компилировать его в строгом формате HTML 5, который является рекомендуемым (хотя и реже используемым) стандартным стилем.

Предупреждение

Цель HTML - сохранить контент в глобальном формате. Он не контролирует представление вашего веб-сайта, например цвет фона и точное расположение элементов. Хотя есть еще теги, которые позволяют вам это делать, рекомендуется использовать CSS для создания более управляемого и последовательного веб-сайта.

Что вам нужно

Простой текстовый редактор, например NotePad или TextEdit
Веб-браузер, например Internet Explorer или Mozilla Firefox.
(Необязательно) редактор HTML, например Adobe Dreamweaver, Aptana Studio или Microsoft Expression Web.