нтмл код

24
НTML- основы ОСНОВЫ HTML

Upload: ekaterina-melchugova

Post on 23-Dec-2014

2.281 views

Category:

Documents


7 download

DESCRIPTION

 

TRANSCRIPT

Page 1: нтмл   код

НTML- основыОСНОВЫ HTML

Page 2: нтмл   код

Все мы уже знаем, как смотреть html код страницы

Page 3: нтмл   код

HTML-самый простой язык.

Page 4: нтмл   код

ТЭГИТэги - это метки, которые вы используете для указания браузеру, как он должен показывать ваш web-сайт.Все тэги имеют одинаковый формат: они начинаются и заканчиваются угловыми скобками.

посмотрите на html код для сайта. Он похож на человека.

Page 5: нтмл   код

тег <html> указывает, что начинается html документ. Его закрывающий тег </html> указывает,что html документ завершен.

<head> <head> - голова

<body><body> - тело. </HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

Page 6: нтмл   код

Например, в стандартном блокноте Windows (Пуск>Программы>Стандартные>Блокнот)

В чем пишется HTML-код?Работать с HTML кодом удобнее в Notepad++ , а можно

Page 7: нтмл   код

Создадим документ HTML. Для этого сохраним безымянный документ в Рабочую папку, присвоив ему имя index.html(Файл>Сохранить как…).

Page 8: нтмл   код

Помещаем в блокнот вот такой текст:

<html><head><title>1-ая страничка</title></head><body>Привет!<br>Это моя первая страничка.</body></html>

Page 9: нтмл   код

Сохраняем файл index.htmlна диск.Блокнот оставляем открытым

Page 10: нтмл   код

Далее, идем в Мой компьютер и открываем правой кнопкой мыши файл index.html с помощью браузера

Page 11: нтмл   код
Page 12: нтмл   код

Нужно ли знать теги и для чего?

Без знания тегов Вы не построите сайт, не сможете корректировать блог И у Вас будут постоянные проблемы с форматированием любого текста,Связанного с размещением в интернете. А так же они необходимы для удобства внутренней оптимизации.

Page 13: нтмл   код

Список основных тегов:

<html> </html> Открытие документа и закрытие документа

<head> </head> Голова документа, между этими тегами идет информация о заголовке

<title> </title> Заголовок документа

<body> </body> Тело документа, между этими тегами содержание самого документа

<meta……..>

Информация о вашей странице: кодировка, ключевые слова, описание

<тэг>…</тэг>

- это контейнер - тэг, который может содержать внутри себя другие тэги (и текст). Обратите внимание – существует внутренняя вложенность тегов: (как матрешка)

Page 14: нтмл   код

<h1> <h2><h3>…. Размер заголовков по возрастающей до 6

<p> </p> Разбивает текст на абзацы, ставится в начале и в конце строки

<br /> (одиночный тег) Перенос предложения на новую строку

<aliqn="сenter " (cтавится в тег после h1…)

Выравниваем по центру

<aliqn="riqht " Выравниваем по правому краю (по умолчанию выравнивает по левому)

<font color="( данные цвета)"> face ="(данные стиля)" и закрываем </font> перед h1…

Цвет шрифта, стиль (Monotype Corsiva)

<bqcolor="…." ( ставится после тега body)

Цвет фона

Page 15: нтмл   код

Size

размер

<div> ( идет обязательно с атрибутами)

Выравнивает по всей ширине

<stronq> </stronq>

Выделение жирным шрифтом

<em> </em>

Выделение курсивом

<u> </u>

Подчеркивание текста

<aliqn="left "

Обтекание картинки текстом

Page 16: нтмл   код

ПРИМЕР ФОРМАТИРОВАНИЯ ТЕКСТАЦвет

Цвет фона задается в теле документа, тег <body>: <body bgcolor="#EAEAEA>

Выражение для цвета можно брать, например, изпрограммы фотошоп:

Page 17: нтмл   код

В теге <body> можно задать и цвет для всего текста на странице, например: text=#0000FF. <body bgcolor=#FFFF00 text=#0000FF>

Для изменения свойств текста (или фрагмента текста) используются атрибуты тега <font>

Так, цвет текста задается атрибутом color:<font color = #FF0000>Строка красного цвета</font>

Page 18: нтмл   код
Page 19: нтмл   код

Создаем на рабочем столе папку, заносим туда свой документ index.html

Создаем там еще одну папку и называем images (картинки) сохраняем там нужные нам картинки

Page 20: нтмл   код
Page 21: нтмл   код
Page 22: нтмл   код
Page 23: нтмл   код
Page 24: нтмл   код

http://rich-lady.com