Скачать презентацию Создание HTML страниц Tема 1 Структура HTML Скачать презентацию Создание HTML страниц Tема 1 Структура HTML

Создание HTML страниц.pptx

  • Количество слайдов: 122

Создание HTML страниц Создание HTML страниц

Tема 1 Структура HTML страниц Tема 1 Структура HTML страниц

Что такое web-страницы и html? Гиперссылка – «активная» ссылка на другой документ. Гипертекст – Что такое web-страницы и html? Гиперссылка – «активная» ссылка на другой документ. Гипертекст – текст, содержащий гиперссылки. WWW (World Wide Web) – «всемирная паутина» , служба Интернет для обмена информацией в виде гипертекста (и гипермедиа). Web-страница – текстовый файл, в котором описано размещение материала на экране. Браузер – программа для просмотра Web-страниц на экране (Internet Explorer, Mozilla Firefox, Opera) HTML - стандартный язык разметки документов в Internet.

Создание первой HTML страницы Шаг 1: Ø Создайте на компьютере отдельную папку для будущей Создание первой HTML страницы Шаг 1: Ø Создайте на компьютере отдельную папку для будущей страницы на рабочем столе.

Создание первой HTML страницы Шаг 2: Ø Назовите созданную папку, как «Первые шаги HTML» Создание первой HTML страницы Шаг 2: Ø Назовите созданную папку, как «Первые шаги HTML»

Создание первой HTML страницы Шаг 3: Ø Запустите простой текстовый редактор «Блокнот» (Пуск -> Создание первой HTML страницы Шаг 3: Ø Запустите простой текстовый редактор «Блокнот» (Пуск -> Все программы -> Стандартные -> Блоконот)

Создание первой HTML страницы Шаг 4: Ø Запустите простой текстовый редактор «Блокнот» Создание первой HTML страницы Шаг 4: Ø Запустите простой текстовый редактор «Блокнот»

Создание первой HTML страницы Шаг 5: Ø Наберите в редакторе «Блокнот» следующий текст: Создание первой HTML страницы Шаг 5: Ø Наберите в редакторе «Блокнот» следующий текст:

Создание первой HTML страницы Шаг 6. 1: Ø Сохраните этот документ, присвоив ему имя Создание первой HTML страницы Шаг 6. 1: Ø Сохраните этот документ, присвоив ему имя *. html Выберите «Файл» -> «Сохранить как»

Создание первой HTML страницы Шаг 6. 2: Ø Сохраните этот документ, присвоив ему имя Создание первой HTML страницы Шаг 6. 2: Ø Сохраните этот документ, присвоив ему имя *. html 1. Убедитесь, что сохраняете на «Рабочий стол» 2. В строке «имя файла» напишите index. html 3. Нажмите кнопку «Сохранить» . Не закрывайте «Блокнот»

Создание первой HTML страницы Шаг 7. 1: ØЗапустите Internet Explorer, нажмите «Файл» -> «Открыть» Создание первой HTML страницы Шаг 7. 1: ØЗапустите Internet Explorer, нажмите «Файл» -> «Открыть»

Создание первой HTML страницы Шаг 7. 2: ØВ появившемся окошке открытия файлов нажмите «Обзор…» Создание первой HTML страницы Шаг 7. 2: ØВ появившемся окошке открытия файлов нажмите «Обзор…»

Создание первой HTML страницы Шаг 7. 3: ØВ появившемся окошке выберите ваш файл index. Создание первой HTML страницы Шаг 7. 3: ØВ появившемся окошке выберите ваш файл index. html на «Рабочем столе» и нажмите «Открыть»

Создание первой HTML страницы Шаг 8: ØВ окошке «Открытия» файла нажмите «ОК» Создание первой HTML страницы Шаг 8: ØВ окошке «Открытия» файла нажмите «ОК»

Создание первой HTML страницы Шаг 9: ØВ окошке Internet Explorer вы увидите документ, созданный Создание первой HTML страницы Шаг 9: ØВ окошке Internet Explorer вы увидите документ, созданный в «Блокноте» . Не закрывайте браузер!

Создание первой HTML страницы Шаг 10: ØВ «Блокноте» в вашем документе, внесите следующие изменения Создание первой HTML страницы Шаг 10: ØВ «Блокноте» в вашем документе, внесите следующие изменения и сохраните документ

Создание первой HTML страницы Шаг 11: Ø Нажмите значок обновления в Internet Explorer и Создание первой HTML страницы Шаг 11: Ø Нажмите значок обновления в Internet Explorer и посмотрите на изменения вашего документа в окне браузера

Tема 2 Теги HTML страниц Tема 2 Теги HTML страниц

Шаг 1: Теги HTML предназначен для разметки текстовых документов (т. е. с помощью него Шаг 1: Теги HTML предназначен для разметки текстовых документов (т. е. с помощью него мы размечаем текст, таблицы, картинки и т. д. на странице). Тэги или tags – метки, которые определяют то, как будут выглядеть картинки, текст и другие элементы на вашей странице, и как они будут располагаться относительно друга. Пример тэга: (перенос текста на другую строку). На первом уроке вы им воспользовались, чтобы написать третью строку в вашем документе «Автор «ваши ФИО» .

Шаг 2: Теги HTML Все, что находится между < и > - это тэг. Шаг 2: Теги HTML Все, что находится между < и > - это тэг. Текст, НЕ находящийся между скобками < > - весь виден при просмотре в браузере.

Шаг 3: Теги HTML Обязательные тэги - это такие теги, которые всегда должны быть Шаг 3: Теги HTML Обязательные тэги - это такие теги, которые всегда должны быть прописаны для каждой своей страницы. Пример: Этот тэг должен открывать ЛЮБОЙ документ. Если есть открывающий тэг, то должен быть и закрывающий (символ прямого слеша «/» перед именем тега): Теги-контейнеры – парные теги, которые нуждаются в соответствующих завершающих тегах

Шаг 4: Теги HTML Содержимое тегов-контейнеров – все, что записано между открывающими и закрывающими Шаг 4: Теги HTML Содержимое тегов-контейнеров – все, что записано между открывающими и закрывающими тегами Пример: шапка ( «голова» ) Мой первый шаг Здравствуйте, это моя первая страница. основная часть ( «тело» )

Шаг 5: Теги HTML Очередность открывающих и закрывающих тегов: Правильное написание НЕправильное написание Шаг 5: Теги HTML Очередность открывающих и закрывающих тегов: Правильное написание НЕправильное написание

Tема 3 Работа с палитрой цветов Tема 3 Работа с палитрой цветов

Шаг 1: Палитра цветов Изменение цвета текста: Для работы с изменением цвета текста необходимо Шаг 1: Палитра цветов Изменение цвета текста: Для работы с изменением цвета текста необходимо пользоваться палитрой цветов, рекомендуемых для экранного дизайна. Все обозначения цвета в HTML прописываются с помощью специальных кодов, например, белый цвет – ffffff.

Шаг 2: Палитра цветов Окрасим в нашем файле предложение «Добро пожаловать! : )» в Шаг 2: Палитра цветов Окрасим в нашем файле предложение «Добро пожаловать! : )» в синий цвет. Для этого: 1. Откройте ваш документ index. html в Блокноте 2. Напишите: Добро пожаловать! : ) 3. Сохраните изменения в документе.

Шаг 3: Палитра цветов Откройте ваш документ index. html в браузере. Шаг 3: Палитра цветов Откройте ваш документ index. html в браузере.

Шаг 4: Палитра цветов Разберем как «работает» тэг, для изменения цвета: <font color= Шаг 4: Палитра цветов Разберем как «работает» тэг, для изменения цвета: Добро пожаловать! : ) сolor – параметр (атрибут) для тэга font, он отвечает, в данном случае, за цвет заключенного в контейнер текста. Атрибут color, как и другие атрибуты, НЕ принадлежит только одному тэгу, он может быть присвоен и некоторым другим тэгам. Перед значением цвета обязательно должен предшествовать значок «решетка» - #.

Шаг 5: Палитра цветов Разберем как окрасить текст всего документа. Для этого следует использовать Шаг 5: Палитра цветов Разберем как окрасить текст всего документа. Для этого следует использовать тэг . То есть, весь текст страницы будет оранжевым, кроме текста, для которого специально прописали . Если цвет текста в не задавать, то по умолчанию он будет черным.

Шаг 6: Палитра цветов Откройте снова ваш документ index. html в браузере. Шаг 6: Палитра цветов Откройте снова ваш документ index. html в браузере.

Шаг 7: Палитра цветов Изменим фон документа index. html. Цвет фона устанавливается в тэге Шаг 7: Палитра цветов Изменим фон документа index. html. Цвет фона устанавливается в тэге , сделаем фон документа светло-розовым:

Шаг 8: Палитра цветов Откройте ваш документ index. html в браузере. Eсли цвет в Шаг 8: Палитра цветов Откройте ваш документ index. html в браузере. Eсли цвет в не указывать, то по умолчанию он будет белым

Tема 4 Параграфы и заголовки Tема 4 Параграфы и заголовки

текст

Выровнять текст" src="https://present5.com/presentation/11954817_65541632/image-34.jpg" alt="Шаг 1: Параграфы вводятся тэгом:

Выровнять текст по центру:

текст

Выровнять текст" /> Шаг 1: Параграфы вводятся тэгом:

Выровнять текст по центру:

текст

Выровнять текст по левому краю:

текст

Выровнять по правому краю:

текст

Выровнять по обоим краям:

текст

Шаг 2. 1: Параграфы Первый способ выравнивания по центру. Поставим параграф с атрибутом центрирования Шаг 2. 1: Параграфы Первый способ выравнивания по центру. Поставим параграф с атрибутом центрирования текста (align="center") в файл index. html

Параграфы Шаг 2. 2: Открыв документ в браузере, можно увидеть теги выравнивания в действии: Параграфы Шаг 2. 2: Открыв документ в браузере, можно увидеть теги выравнивания в действии:

Шаг 3. 1: Параграфы Второй способ выравнивания по центру. Поставим <center> текст </center> в Шаг 3. 1: Параграфы Второй способ выравнивания по центру. Поставим

текст
в файл index. html

Параграфы Шаг 3. 2: Открыв документ в браузере, можно увидеть теги выравнивания по центру Параграфы Шаг 3. 2: Открыв документ в браузере, можно увидеть теги выравнивания по центру в действии:

Самостоятельная работа № 1 Применив все изученные теги, создайте свою персональную html-страничку. Например: Самостоятельная работа № 1 Применив все изученные теги, создайте свою персональную html-страничку. Например:

Шаг 1: Заголовки Существуют шесть уровней заголовков: H 1 – самый важный, H 6 Шаг 1: Заголовки Существуют шесть уровней заголовков: H 1 – самый важный, H 6 – наименее важный. Вводя заголовки в текст, вы позволяете пользователям легко ориентироваться на странице. Заголовки определяют структуру внутри текста.

Заголовки Шаг 2: Введем заголовок в наш документ: Заголовки Шаг 2: Введем заголовок в наш документ:

Заголовки Шаг 3: Открыв документ в браузере, можно увидеть теги заголовка <H 2></H 2> Заголовки Шаг 3: Открыв документ в браузере, можно увидеть теги заголовка в действии: Визуально заголовки отображаются не только более крупным шрифтом, но к тому же и полужирным. Также после закрывающего происходит автоматический перенос на другую строку.

Tема 5 Размер, тип и стиль шрифта Tема 5 Размер, тип и стиль шрифта

Шаг 1: Размер шрифта Выделение большого фрагмента текста выполняются с помощью атрибута size тэга Шаг 1: Размер шрифта Выделение большого фрагмента текста выполняются с помощью атрибута size тэга , который устанавливает желаемый размер шрифта:

Размер шрифта Шаг 2: Изменим размер шрифта в наших документах, созданных на самостоятельной работе Размер шрифта Шаг 2: Изменим размер шрифта в наших документах, созданных на самостоятельной работе № 1, например:

Размер шрифта Шаг 3: Открыв документ в браузере, можно увидеть теги изменения размера шрифта Размер шрифта Шаг 3: Открыв документ в браузере, можно увидеть теги изменения размера шрифта в действии:

Шаг 1. 1: Стиль шрифта Курсив и полужирный текст : <b> Полужирный текст </b> Шаг 1. 1: Стиль шрифта Курсив и полужирный текст : Полужирный текст Наклонный текст (курсив) Моноширинный шрифт - это шрифт с символами одинаковой фиксированной ширины, как шрифт у пишущей машинки: моноширинный шрифт

Стиль шрифта Шаг 1. 2: Изменим стиль шрифта в наших документах на курсив в Стиль шрифта Шаг 1. 2: Изменим стиль шрифта в наших документах на курсив в любой области, созданных на самостоятельной работе № 1, например:

Стиль шрифта Шаг 1. 3: Открыв документ в браузере, можно увидеть теги изменения стиля Стиль шрифта Шаг 1. 3: Открыв документ в браузере, можно увидеть теги изменения стиля шрифта в действии:

Шаг 2: Стиль шрифта Подчеркнутый текст: <u> Подчеркнутый текст </u> Тэги <strike> и <s> Шаг 2: Стиль шрифта Подчеркнутый текст: Подчеркнутый текст Тэги и представляют текст перечеркнутым шрифтом: Перечеркнутый Перечеркнутый Тэги Sup и Sub - определяют верхний и нижний индексы. Sup - верхний, Sub – нижний: Верхний индекс sup Нижний индекс sub

текст" src="https://present5.com/presentation/11954817_65541632/image-51.jpg" alt="Шаг 1: Тип шрифта С помощью атрибута face задается тип шрифта: текст" /> Шаг 1: Тип шрифта С помощью атрибута face задается тип шрифта: текст (шрифт Arial) Стандартными типами шрифтов являются:

Шаг 2: Тип шрифта В атрибуте face можно указать сразу несколько типов шрифтов: <font Шаг 2: Тип шрифта В атрибуте face можно указать сразу несколько типов шрифтов: текст (шрифт Arial) То есть, если у посетителя не окажется на компьютере шрифта Arial, то текст будет отображен шрифтом Verdana. Если и Verdana нет на компьютере вашего посетителя, то текст будет отображен шрифтом Courier. В атрибуте face мы можем задать список разделенных запятыми названий шрифтов, которые браузер посетителя странички должен попытаться найти у него на компьютере и отобразить в порядке приоритета.

Самостоятельная работа № 2 Применив знания по тегам изменения размера, типа и стиля шрифта, Самостоятельная работа № 2 Применив знания по тегам изменения размера, типа и стиля шрифта, измените вашу персональную htmlстраничку. Например:

Tема 6 Работа с рисунками Tема 6 Работа с рисунками

Шаг 1. 1: Работа с рисунками Любые рисунки (анимированные *. gif и обычные *. Шаг 1. 1: Работа с рисунками Любые рисунки (анимированные *. gif и обычные *. jpg, *. bmp и т. д. ) вставляются в html-документ: Вместо my. jpg можно подставить имя любой картинки (me. gif, main. png). Все расположенное между кавычками - ссылка (путь к картинке). В данном примере картинка лежит в том же каталоге, в которой лежит документ. Если картинка лежит в поддиректории (в папке, которая лежит в основной папке), то ссылка на неё будет выглядеть так:

Работа с рисунками Шаг 1. 2: Если картинка лежит на уровень выше, а документ Работа с рисунками Шаг 1. 2: Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой: Если картинка лежит на другом сайте, то путь прописывается полностью: Для удобства лучше класть картинку в ту же папку, что и документ, тогда путаницы будет меньше. ВНИМАНИЕ: MY. jpg, my. JPG, my. jpg и MY. JPG – это разные имена файлов.

Работа с рисунками Шаг 1. 3: Вставим картинку в наш документ перед заголовком. Например: Работа с рисунками Шаг 1. 3: Вставим картинку в наш документ перед заголовком. Например:

Работа с рисунками Шаг 1. 4: Открыв документ в браузере, можно увидеть рисунок, ссылку Работа с рисунками Шаг 1. 4: Открыв документ в браузере, можно увидеть рисунок, ссылку на который вы прописали в вашем htmlдокументе:

Работа с рисунками Шаг 2. 1: Сделаем заглавную букву картинкой, но так, чтобы текст Работа с рисунками Шаг 2. 1: Сделаем заглавную букву картинкой, но так, чтобы текст красиво располагался сбоку от картинки. Атрибут align, который отвечает за выравнивание, есть и у картинок: Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наоборот (картинка справа, текст слева) надо прописать right:

Работа с рисунками Шаг 2. 2: Но это не все: текст может располагаться внизу Работа с рисунками Шаг 2. 2: Но это не все: текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3): (1) - (2) - (3) - Кроме атрибута align для тэга можно ввести еще несколько атрибутов: (1) - атрибут vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. Pixel - минимальная единица изображения, точка. Например, разрешение экрана 800 х600 - 800 на 600 точек. В примере расстояние равно 10 пикселям.

атрибут" src="https://present5.com/presentation/11954817_65541632/image-61.jpg" alt="Работа с рисунками Шаг 2. 3: (2) - атрибут" /> Работа с рисунками Шаг 2. 3: (2) - атрибут hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. (3)-моя фотография атрибут alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд, выскочит описание картинки. В данном случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет.

атрибут" src="https://present5.com/presentation/11954817_65541632/image-62.jpg" alt="Работа с рисунками Шаг 2. 4: (4) - атрибут" /> Работа с рисунками Шаг 2. 4: (4) - атрибут width - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже, или шире). (5) - атрибут height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать.

атрибут" src="https://present5.com/presentation/11954817_65541632/image-63.jpg" alt="Работа с рисунками Шаг 2. 5: (6) - атрибут" /> Работа с рисунками Шаг 2. 5: (6) - атрибут border - рамка вокруг самой картинки (в пикселях). Можно не задавать. Однако, по умолчанию, рамка вокруг картинки есть всегда. И если вы хотите убрать ее, то выставляйте атрибут border равным нулю. Атрибуты для одного тэга могут употребляться одновременно друг с другом.

Работа с рисунками Шаг 2. 5: Например: <img src= Работа с рисунками Шаг 2. 5: Например: Введение Заглавная буква в html-документе будет прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали - 5 пикселей, по вертикали - 5 пикселей, если навести на картинку курсор, то выскочит надпись - «Введение» , картинка по высоте и ширине составляет 55 пикелей.

Работа с рисунками Шаг 2. 6: Например: Работа с рисунками Шаг 2. 6: Например:

Работа с рисунками Шаг 2. 7: Открыв документ в браузере, можно увидеть рисунок заглавной Работа с рисунками Шаг 2. 7: Открыв документ в браузере, можно увидеть рисунок заглавной буквы, ссылка на который прописана в htmlдокументе:

Работа с рисунками Шаг 3. 1: Картинку можно сделать фоном документа, если в открывающем Работа с рисунками Шаг 3. 1: Картинку можно сделать фоном документа, если в открывающем тэге боди прописать: Атрибут background указывает на то, где лежит фоновая картинка, в нашем примере он указывает на то, что наша фоновая картинка лежит в той же директории (папке), что и наш документ. Атрибут bgcolor следует оставить, даже если есть background, для того случая когда фоновая картинка не загрузится

Работа с рисунками Шаг 3. 2: Например: Работа с рисунками Шаг 3. 2: Например:

Работа с рисунками Шаг 3. 3: Открыв документ в браузере, можно увидеть фоновый рисунок: Работа с рисунками Шаг 3. 3: Открыв документ в браузере, можно увидеть фоновый рисунок:

Самостоятельная работа № 3 Применив знания по ссылкам на рисунки, измените вашу персональную html-страничку. Самостоятельная работа № 3 Применив знания по ссылкам на рисунки, измените вашу персональную html-страничку. Например:

Tема 7 Работа с ссылками Часть 1 Tема 7 Работа с ссылками Часть 1

Шаг 1: Работа с ссылками Страничка может состоять из нескольких документов. Один из них Шаг 1: Работа с ссылками Страничка может состоять из нескольких документов. Один из них главный (index. html) - он открывается первым и должен обязательно лежать на сайте в интернете. Остальные документы вы можете называть как угодно (photos. html, about_me. html, my_pets. html, friends. html, gh 516 hgd. html). Они все могут лежать в одной директории (папке), а могут в разных. Документы связаны при помощи ссылок. С главной страницы по ссылкам можно перейти на страницу с фотографиями или обратно на главную страницу, или, допустим, на страницу состихотворениями, и т. д. Ссылкой на эти другие документы (части странички) могут быть тексты (фразы, слова), а могут быть и картинки.

Шаг 2. 1: Работа с ссылками Текстовые ссылки: В данном примере создадим файлы, к Шаг 2. 1: Работа с ссылками Текстовые ссылки: В данном примере создадим файлы, к трем основным темам в изучаемом материале: soderzh_nadezn. html, soderzh_ergonom. html, zhivuchest. html, соответствующие таким пунктам, как: надежность, эргономичность и живучесть на главной страничке index. html, которые будут размещены в отдельной директории (папке) – «НЭК» .

Шаг 2. 2: Работа с ссылками В каждом документе написано содержание для каждой из Шаг 2. 2: Работа с ссылками В каждом документе написано содержание для каждой из подтем курса, которые в дальнейшем так же могут быть ссылками на лекции и лабораторный работы оп данным дисциплинам. Например, в файле soderzh_nadezn. html:

Шаг 2. 3: Работа с ссылками Сделаем Шаг 2. 3: Работа с ссылками Сделаем "Надежность" ссылкой на soderzh_nadezn. html: Надежность а так же, внизу странички сделаем с правого края ссылку на сайт НФИКем. ГУ: Сайт НФИ Кем. ГУ Тэг делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути: (1) - Надежность (2) - Надежность (3) - Сайт НФИ Кем. ГУ

Шаг 2. 4: Работа с ссылками В случае (1) документ лежит в той же Шаг 2. 4: Работа с ссылками В случае (1) документ лежит в той же директории (папке), что и документ, в котором ссылаемся на soderzh_nadezn. html, в случае (2) документ лежит в поддиректории /НЭК, в случае (3) ссылаемся на сайт http: //www. nkfi. ru, где находится официальный сайт НФИ Кем. ГУ. Первые два примера (1) и (2) – называют относительными, (3) – абсолютными путями, т. е. указанный полностью, включая имя сайта (в данном случае - http: //www. nkfi. ru/). Абсолютный путь мы используем, когда ссылаются на чужие странички, относительный используется, когда ссылаются на документы внутри рассматриваемого сайта.

Работа с ссылками Шаг 2. 5: Открыв документ в браузере, можно увидеть, что первый Работа с ссылками Шаг 2. 5: Открыв документ в браузере, можно увидеть, что первый пункт – «Надежность» теперь выделяется как ссылка:

Работа с ссылками Шаг 2. 6: Перейдя по ссылке, вы попадете на созданную вами Работа с ссылками Шаг 2. 6: Перейдя по ссылке, вы попадете на созданную вами новую страничку, в данном примере - soderzh_nadezn. html. У данной страничке есть свое имя, свое наполнение, а также ссылка на сайт нашего ВУЗа:

Шаг 2. 7: Работа с ссылками Для всех ссылок в документе можно прописать цвета: Шаг 2. 7: Работа с ссылками Для всех ссылок в документе можно прописать цвета: link - цвет просто ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки. Например, Как и цвет для всего текста в документе, цвета ссылок прописывается в . В нашем примере цвета для просто ссылки, активной и посещенной - одинаковые, но они могут быть разными – это на усмотрение разработчика.

Шаг 2. 8: Работа с ссылками Из материала изученного ранее, вы знаете, что можно Шаг 2. 8: Работа с ссылками Из материала изученного ранее, вы знаете, что можно задавать различные цвета для разных блоков текста в html-документах (). Для текстовых ссылок тоже можно задавать разный цвет – это делается при помощи тэга и его атрибута color: Надежность Обратите внимание, - прописывается внутри тэга , если прописать иначе, то не получится задать ссылке цвет отличный от цвета других ссылок в документе.

Самостоятельная работа № 4 Применив знания по работе со ссылками, доработайте вашу персональную html-страничку: Самостоятельная работа № 4 Применив знания по работе со ссылками, доработайте вашу персональную html-страничку: 1. Создайте две-три дополнительные странички, переадресация на которые будет выполняться с вашей главной страницы. 2. На каждой вашей страничке внизу справа должна быть ссылка на то подразделение в университете, в котором вы работаете. 3. Текст ссылок должен отличаться от основного цвета ссылок. 4. Ссылки, по которым был осуществлен переход, должны выделяться другим цветом.

Tема 8 Работа с ссылками Часть 2 Tема 8 Работа с ссылками Часть 2

Работа с ссылками. Часть 2 Шаг 1: Ссылка на почтовый ящик прописывается немного иначе, Работа с ссылками. Часть 2 Шаг 1: Ссылка на почтовый ящик прописывается немного иначе, чем ссылка на другой документ (страницу, сайт): pochta@mail. ru Ссылка на документ, картинку или файл - одно дело, а ссылка на почтовый ящик – другое.

Работа с ссылками. Часть 2 Шаг 2: У mailto есть дополнительные опции: ? subject=Тема Работа с ссылками. Часть 2 Шаг 2: У mailto есть дополнительные опции: ? subject=Тема пиcьма &Body=Текст вашего сообщения &cc=copy@mail. ru, copy 2@mail. ru (копии письма через запятую) &bcc=hidden_copy@mail. ru, hidden_copy 2@mail. ru (скрытые копии письма через запятую)

Работа с ссылками. Часть 2 Шаг 3: Все вместе это будет выглядеть так: <a Работа с ссылками. Часть 2 Шаг 3: Все вместе это будет выглядеть так: pochta@mail. ru То есть, если нажать на такую ссылку, то почтовая программа выдаст бланк нового письма с уже заполнеными полями.

Работа с ссылками. Часть 2 Шаг 4: Например, сделаем в наших разрабатываемых работах на Работа с ссылками. Часть 2 Шаг 4: Например, сделаем в наших разрабатываемых работах на главной страничке справа – ФИО автора – разработчика и ссылку на свой почтовый адрес:

Работа с ссылками. Часть 2 Шаг 5: В окошке браузера увидим следующее: Работа с ссылками. Часть 2 Шаг 5: В окошке браузера увидим следующее:

Работа с ссылками. Часть 2 Шаг 6: Атрибут title (не путать с тэгом <TITLE>) Работа с ссылками. Часть 2 Шаг 6: Атрибут title (не путать с тэгом ) предлагает информацию об элементе, для которого он устанавливается. Можно установить его, например, для тэга <a>: <a href="ssilka. html" title="Ваша подсказка"> текст-ссылка </a> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с ссылками. Часть 2 Шаг 7: Например, сделаем комментарий к нашей ссылке в" src="https://present5.com/presentation/11954817_65541632/image-89.jpg" alt="Работа с ссылками. Часть 2 Шаг 7: Например, сделаем комментарий к нашей ссылке в" /> Работа с ссылками. Часть 2 Шаг 7: Например, сделаем комментарий к нашей ссылке в htmlдокументе: </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с ссылками. Часть 2 Шаг 8: В окошке браузера увидим следующее: " src="https://present5.com/presentation/11954817_65541632/image-90.jpg" alt="Работа с ссылками. Часть 2 Шаг 8: В окошке браузера увидим следующее: " /> Работа с ссылками. Часть 2 Шаг 8: В окошке браузера увидим следующее: </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с ссылками. Часть 2 Шаг 9: Рисунок тоже может быть ссылкой! Принцип ссылки" src="https://present5.com/presentation/11954817_65541632/image-91.jpg" alt="Работа с ссылками. Часть 2 Шаг 9: Рисунок тоже может быть ссылкой! Принцип ссылки" /> Работа с ссылками. Часть 2 Шаг 9: Рисунок тоже может быть ссылкой! Принцип ссылки тот же, что и в случае с текстом, только в тэг <a></a> вставляется не текст, а картинка: <a href="prf. html"><img src="primtocodephoto. gif"></a> Если нужно сделать картинку ссылкой на почтовый ящик, то принцип тот же: <a href="mailto: pochta@mail. ru"><img src="primtocodephoto. gif"></a> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с ссылками. Часть 2 Шаг 10: Например, сделаем ссылку на почту в виде" src="https://present5.com/presentation/11954817_65541632/image-92.jpg" alt="Работа с ссылками. Часть 2 Шаг 10: Например, сделаем ссылку на почту в виде" /> Работа с ссылками. Часть 2 Шаг 10: Например, сделаем ссылку на почту в виде картинки: </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с ссылками. Часть 2 Шаг 11: В окошке браузера увидим вместо почтового адреса" src="https://present5.com/presentation/11954817_65541632/image-93.jpg" alt="Работа с ссылками. Часть 2 Шаг 11: В окошке браузера увидим вместо почтового адреса" /> Работа с ссылками. Часть 2 Шаг 11: В окошке браузера увидим вместо почтового адреса – картинку, нажав на которую можно отправить письмо группе разработчиков: </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с ссылками. Часть 2 Шаг 12: Так картинку ссылки на почтовый ящик плохо" src="https://present5.com/presentation/11954817_65541632/image-94.jpg" alt="Работа с ссылками. Часть 2 Шаг 12: Так картинку ссылки на почтовый ящик плохо" /> Работа с ссылками. Часть 2 Шаг 12: Так картинку ссылки на почтовый ящик плохо видно, то лучше задать рамку картинке. Цвет рамки вокруг картинки задается атрибутом bordercolor, например: <img src="picture. gif" border="3" bordercolor="#CC 0000"> В этом примере цвет рамки красный, и, естественно, атрибут border (толщина рамки) не должен равняться нулю, т. к. тогда рамки не будет видно. Если картинка будет ссылкой, то рамка вокруг нее будет того цвета, который задан для ссылок в тэге body с помощью link, vlink, alink, т. е. атрибут bordercolor в этом случае уже не влияет на цвет рамки вокруг картинки. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с ссылками. Часть 2 Шаг 13: Например, обведем наш конвертик – ссылку на" src="https://present5.com/presentation/11954817_65541632/image-95.jpg" alt="Работа с ссылками. Часть 2 Шаг 13: Например, обведем наш конвертик – ссылку на" /> Работа с ссылками. Часть 2 Шаг 13: Например, обведем наш конвертик – ссылку на почту: </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с ссылками. Часть 2 Шаг 14: В окошке браузера увидим картинку - ссылку," src="https://present5.com/presentation/11954817_65541632/image-96.jpg" alt="Работа с ссылками. Часть 2 Шаг 14: В окошке браузера увидим картинку - ссылку," /> Работа с ссылками. Часть 2 Шаг 14: В окошке браузера увидим картинку - ссылку, обведенную синей рамкой, так как по умолчанию этот цвет используется для ссылок: </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с ссылками. Часть 2 Шаг 15: Ссылка может быть не только на документ" src="https://present5.com/presentation/11954817_65541632/image-97.jpg" alt="Работа с ссылками. Часть 2 Шаг 15: Ссылка может быть не только на документ" /> Работа с ссылками. Часть 2 Шаг 15: Ссылка может быть не только на документ с расширением *. html, но и на многие другие (*. doc, *. mp 3, *. jpg, *. gif, *. txt, *. zip, *. exe) Например: <a href="http: //www. melody. ru/music. mp 3"> скачать песню </a> При нажатии на такую ссылку у пользователя появится окошко, предлагающее сохранить ему музыкальный файл на его компьютере. Т. е. если файл не является текстовым документом (*. doc, *. txt) или, например, *. html документом, то браузер вашего пользователя предложит ему скачать такой файл. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с ссылками. Часть 2 Шаг 16: Например, слово «Эргономичность» сделаем ссылкой на скачивание" src="https://present5.com/presentation/11954817_65541632/image-98.jpg" alt="Работа с ссылками. Часть 2 Шаг 16: Например, слово «Эргономичность» сделаем ссылкой на скачивание" /> Работа с ссылками. Часть 2 Шаг 16: Например, слово «Эргономичность» сделаем ссылкой на скачивание электронной книги, касающейся изучения данного раздела: </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с ссылками. Часть 2 Шаг 18: В окошке браузера увидим, что второй пункт" src="https://present5.com/presentation/11954817_65541632/image-99.jpg" alt="Работа с ссылками. Часть 2 Шаг 18: В окошке браузера увидим, что второй пункт" /> Работа с ссылками. Часть 2 Шаг 18: В окошке браузера увидим, что второй пункт стал ссылкой, если на нее нажать, то вылетит окошко, предлагающее сохранить архив: </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с ссылками. Часть 2 Шаг 19: Для того, чтобы картинки не перегружали html-документы," src="https://present5.com/presentation/11954817_65541632/image-100.jpg" alt="Работа с ссылками. Часть 2 Шаг 19: Для того, чтобы картинки не перегружали html-документы," /> Работа с ссылками. Часть 2 Шаг 19: Для того, чтобы картинки не перегружали html-документы, то лучше на страничке их делать маленькими картинками, нажав на которые эти же картинки будут открываться в большом формате. Для этого следует сделать ссылкой картинку (допустим small. jpg) и ссылаемся на другую картинку (допустим big. jpg): <a href="big. jpg"> <img src="small. jpg"> </a> В этом случае большая картинка откроется в том же окне. Если необходимо, чтобы катринка открввалась в другом окне, то следует использовать атрибут target для тэга <a></a> : <a href="big. jpg" target="_blank"> <img src="small. jpg"> </a> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с ссылками. Часть 2 Шаг 20: Например, пройдя по ссылке «Надежность» , мы" src="https://present5.com/presentation/11954817_65541632/image-101.jpg" alt="Работа с ссылками. Часть 2 Шаг 20: Например, пройдя по ссылке «Надежность» , мы" /> Работа с ссылками. Часть 2 Шаг 20: Например, пройдя по ссылке «Надежность» , мы перейдем на другую страничку, вверху которой есть рисунок маленького размера. Сделаем так, чтобы при нажатии на него, он открывался в большом размере на отдельной страничке. Для этого сделаем копию данной картинке и пропишем следующее: </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с ссылками. Часть 2 Шаг 21: В окошке браузера нажмем на маленькую картинку" src="https://present5.com/presentation/11954817_65541632/image-102.jpg" alt="Работа с ссылками. Часть 2 Шаг 21: В окошке браузера нажмем на маленькую картинку" /> Работа с ссылками. Часть 2 Шаг 21: В окошке браузера нажмем на маленькую картинку и увидим что в соседнем окошке откроется эта же картинка, но в большом формате: </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Tема 9 Работа с таблицами " src="https://present5.com/presentation/11954817_65541632/image-103.jpg" alt="Tема 9 Работа с таблицами " /> Tема 9 Работа с таблицами </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с таблицами Шаг 1: При создании html-страниц для учебно-методических обучающих курсов, очень часто" src="https://present5.com/presentation/11954817_65541632/image-104.jpg" alt="Работа с таблицами Шаг 1: При создании html-страниц для учебно-методических обучающих курсов, очень часто" /> Работа с таблицами Шаг 1: При создании html-страниц для учебно-методических обучающих курсов, очень часто используются таблицы. Таблица задается тэгом: <table></table> Так как таблица состоит из строк и столбцов (ячеек), то необходимо так же указывать их: <tr></tr> - строчка таблицы <td></td> - столбец (ячейка) таблицы </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с таблицами Шаг 2. 1: Создадим таблицу, состоящую из двух строк и трех" src="https://present5.com/presentation/11954817_65541632/image-105.jpg" alt="Работа с таблицами Шаг 2. 1: Создадим таблицу, состоящую из двух строк и трех" /> Работа с таблицами Шаг 2. 1: Создадим таблицу, состоящую из двух строк и трех столбцов (ячеек). Для наглядности выделим ячейки таблицы разными цветами. Границы таблицы задавать не нужно, поэтому они будут невидимыми: 1. Напишем код для двух строк: <table> <tr></tr> </table> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с таблицами Шаг 2. 2: 2. В каждой строке зададим по три столбца" src="https://present5.com/presentation/11954817_65541632/image-106.jpg" alt="Работа с таблицами Шаг 2. 2: 2. В каждой строке зададим по три столбца" /> Работа с таблицами Шаг 2. 2: 2. В каждой строке зададим по три столбца (ячейки): <table> <tr> <td></td> <td></td> </tr> </table> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с таблицами Шаг 2. 3: 3. Заполним получившийся каркас: <table> <tr> <td>1 x" src="https://present5.com/presentation/11954817_65541632/image-107.jpg" alt="Работа с таблицами Шаг 2. 3: 3. Заполним получившийся каркас: <table> <tr> <td>1 x" /> Работа с таблицами Шаг 2. 3: 3. Заполним получившийся каркас: <table> <tr> <td>1 x 1</td> <td>1 x 2</td> <td>1 x 3</td> </tr> <td>2 x 1</td> <td>2 x 2</td> <td>2 x 3</td> </tr> </table> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Шаг 2. 4: Работа с таблицами 4. Фон задается атрибутом bgcolor="цвет_фона". Фон можно задать" src="https://present5.com/presentation/11954817_65541632/image-108.jpg" alt="Шаг 2. 4: Работа с таблицами 4. Фон задается атрибутом bgcolor="цвет_фона". Фон можно задать" /> Шаг 2. 4: Работа с таблицами 4. Фон задается атрибутом bgcolor="цвет_фона". Фон можно задать для таблицы в целом, для ряда, для ячейки (в пределе одного ряда). В нашем случае мы задаем фон для каждой ячейки: <table> <tr> <td bgcolor="#990099">1 x 1</td> <td bgcolor="#00 FF 99">1 x 2</td> <td bgcolor="#990099">1 x 3</td> </tr> <td bgcolor="#00 FF 99">2 x 1</td> <td bgcolor="#990099">2 x 2</td> <td bgcolor="#00 FF 99">2 x 3</td> </tr> </table> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Шаг 2. 5: Работа с таблицами Применим на практике полученные знания. Для начала сделаем" src="https://present5.com/presentation/11954817_65541632/image-109.jpg" alt="Шаг 2. 5: Работа с таблицами Применим на практике полученные знания. Для начала сделаем" /> Шаг 2. 5: Работа с таблицами Применим на практике полученные знания. Для начала сделаем таблицу с фоновой заливкой (в этом примере шахматная заливка голубым и сиреневым цветом) на главной странице, разрабатываемого вами htmlдокумента: </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Шаг 2. 6: Работа с таблицами Сохранив изменения и обновив html-страничку в браузере увидим" src="https://present5.com/presentation/11954817_65541632/image-110.jpg" alt="Шаг 2. 6: Работа с таблицами Сохранив изменения и обновив html-страничку в браузере увидим" /> Шаг 2. 6: Работа с таблицами Сохранив изменения и обновив html-страничку в браузере увидим следующее: </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Шаг 2. 7: Работа с таблицами Как видно при просмотре браузера, таблица получилась маленькая" src="https://present5.com/presentation/11954817_65541632/image-111.jpg" alt="Шаг 2. 7: Работа с таблицами Как видно при просмотре браузера, таблица получилась маленькая" /> Шаг 2. 7: Работа с таблицами Как видно при просмотре браузера, таблица получилась маленькая и надписи в ячейках плотно прилегают друг к другу. Чтобы расширить ячейки, нужно задать им такие параметры как высота и ширина - height и width: <table> <tr> <td height="35" width="50" bgcolor="#990099"> 1 x 1 </td> <td width="50" bgcolor="#00 FF 99"> 1 x 2 </td> <td width="50" bgcolor="#990099"> 1 x 3 </td> </tr> <td height="35" width="50" bgcolor="#00 FF 99"> 2 x 1 </td> <td width="50" bgcolor="#990099"> 2 x 2 </td> <td width="50" bgcolor="#00 FF 99"> 2 x 3 </td> </tr> </table> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Шаг 2. 8: Работа с таблицами 1. Высота задается только для двух ячеек (столбцов)," src="https://present5.com/presentation/11954817_65541632/image-112.jpg" alt="Шаг 2. 8: Работа с таблицами 1. Высота задается только для двух ячеек (столбцов)," /> Шаг 2. 8: Работа с таблицами 1. Высота задается только для двух ячеек (столбцов), а ширина для всех, т. к если в ряду задать для какой-либо ячейки высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) ряда станут по высоте равны наибольшей. Тоже самое с рядами, если задать для какого-то ряда наибольшую длину, то все остальные ряды выровняются по этому наибольшему. 2. Можно задать высоту и ширину для всей таблицы, тогда все ячейки (столбцы) и ряды поделят данное им пространство поровну. 3. Атрибуты height и width можно задать в процентах: <td width="30%"> содержимое ячейки </td> Если для ячейки задана ширина в 30%, то это значит, что на остальные ячейки осталось еще 70%, т. е. сумма их ширин не должна превышать 70%. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Шаг 2. 9: Работа с таблицами Так как данная табличка смотрится инородно в нашем" src="https://present5.com/presentation/11954817_65541632/image-113.jpg" alt="Шаг 2. 9: Работа с таблицами Так как данная табличка смотрится инородно в нашем" /> Шаг 2. 9: Работа с таблицами Так как данная табличка смотрится инородно в нашем разрабатываемом html-документе, то на следующем этапе, применив полученные знания, разработает свои таблицы. Например, в обучающем курсе лекций ниже будет приведена таблица, перечисляющая этапы развития надежности. Таблица размером 2 на 4, без заливки фона ячеек: </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с таблицами Шаг 2. 10: Первая строка – названия этапов, к оформлению надписей" src="https://present5.com/presentation/11954817_65541632/image-114.jpg" alt="Работа с таблицами Шаг 2. 10: Первая строка – названия этапов, к оформлению надписей" /> Работа с таблицами Шаг 2. 10: Первая строка – названия этапов, к оформлению надписей были применены знания полученные выше, при изучении данного курса: </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с таблицами Шаг 2. 11: Вторая строка – описание каждого конкретного этапа развития" src="https://present5.com/presentation/11954817_65541632/image-115.jpg" alt="Работа с таблицами Шаг 2. 11: Вторая строка – описание каждого конкретного этапа развития" /> Работа с таблицами Шаг 2. 11: Вторая строка – описание каждого конкретного этапа развития науки: </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с таблицами Шаг 2. 12: Сохранив изменения и обновив браузер мы увидим: " src="https://present5.com/presentation/11954817_65541632/image-116.jpg" alt="Работа с таблицами Шаг 2. 12: Сохранив изменения и обновив браузер мы увидим: " /> Работа с таблицами Шаг 2. 12: Сохранив изменения и обновив браузер мы увидим: </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с таблицами Шаг 2. 13: Вертикальное выравнивание содержимого в ячейках, т. е. содержимое" src="https://present5.com/presentation/11954817_65541632/image-117.jpg" alt="Работа с таблицами Шаг 2. 13: Вертикальное выравнивание содержимого в ячейках, т. е. содержимое" /> Работа с таблицами Шаг 2. 13: Вертикальное выравнивание содержимого в ячейках, т. е. содержимое ячейки может располагаться ровно посередине ее (как по умолчанию), а еще вверху или внизу. Вертикальное выравнивание задается следующим атрибутом - valign="middle" (top, bottom) - содержимое конкретной ячейки будет находится в середине ячейки (наверху или внизу). Например, сделаем выравнивание содержимого второй строки готовой таблицы по высоте </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с таблицами Шаг 2. 14: Html-код будет выглядеть следующим образом: " src="https://present5.com/presentation/11954817_65541632/image-118.jpg" alt="Работа с таблицами Шаг 2. 14: Html-код будет выглядеть следующим образом: " /> Работа с таблицами Шаг 2. 14: Html-код будет выглядеть следующим образом: </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с таблицами Шаг 2. 15: После сохранения данных изменений в коде, в браузере" src="https://present5.com/presentation/11954817_65541632/image-119.jpg" alt="Работа с таблицами Шаг 2. 15: После сохранения данных изменений в коде, в браузере" /> Работа с таблицами Шаг 2. 15: После сохранения данных изменений в коде, в браузере мы увидим сделанные изменения: </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с таблицами Шаг 2. 16: Атрибуты colspan и rowspan. Colspan - определяет количество" src="https://present5.com/presentation/11954817_65541632/image-120.jpg" alt="Работа с таблицами Шаг 2. 16: Атрибуты colspan и rowspan. Colspan - определяет количество" /> Работа с таблицами Шаг 2. 16: Атрибуты colspan и rowspan. Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов (эти параметры могут принимать значение от 2 и больше, т. е. ячейка может растягиваться на два и более столбца (ряда)). Например, растянем ячейку 1 х1 на два столбца (ячейки). Для этого используем атрибут colspan="2", прописав его для ячейки 1 х1 и удалив информацию кода для ячейки 1 х2. Код будет выглядеть следующим образом (принцип работы с атрибутом rowspan такой же): </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с таблицами Шаг 2. 17: После сохранения данных изменений в коде, в браузере" src="https://present5.com/presentation/11954817_65541632/image-121.jpg" alt="Работа с таблицами Шаг 2. 17: После сохранения данных изменений в коде, в браузере" /> Работа с таблицами Шаг 2. 17: После сохранения данных изменений в коде, в браузере мы увидим сделанные изменения: </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Работа с таблицами Шаг 2. 18: При работе с таблицами зачастую бывает необходимость увеличить" src="https://present5.com/presentation/11954817_65541632/image-122.jpg" alt="Работа с таблицами Шаг 2. 18: При работе с таблицами зачастую бывает необходимость увеличить" /> Работа с таблицами Шаг 2. 18: При работе с таблицами зачастую бывает необходимость увеличить или уменьшить пространство между ячейками, столбцами или строками. Это достигается с помощью атрибута cellspacing: 1. Если необходимо избавиться от пространства между ячейками, столбцами или строками, то атрибут равен 0: <table cellspacing="0"> 2. Если необходимо увеличить пространство, то следует задать какое-либо значение больше 0, например равное 7: <table cellspacing= « 7"> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="" src="" alt="" /> </p> </div> </div> <div id="inputform"> <script>$("#inputform").load("https://present5.com/wp-content/plugins/report-content/inc/report-form-aj.php"); </script> </div> </p> <!--end entry-content--> </div> </article><!-- .post --> </section><!-- #content --> <div class="three columns"> <div class="widget-entry"> </div> </div> </div> </div> <!-- #content-wrapper --> <footer id="footer" style="padding: 5px 0 5px;"> <div class="container"> <div class="columns twelve"> <!--noindex--> <!--LiveInternet counter--><script type="text/javascript"><!-- document.write("<img src='//counter.yadro.ru/hit?t26.10;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";"+Math.random()+ "' alt='' title='"+" ' "+ "border='0' width='1' height='1'><\/a>") //--></script><!--/LiveInternet--> <a href="https://slidetodoc.com/" alt="Наш международный проект SlideToDoc.com!" target="_blank"><img src="https://present5.com/SlideToDoc.png"></a> <script> $(window).load(function() { var owl = document.getElementsByClassName('owl-carousel owl-theme owl-loaded owl-drag')[0]; document.getElementById("owlheader").insertBefore(owl, null); $('#owlheader').css('display', 'inline-block'); }); </script> <script type="text/javascript"> var yaParams = {'typepage': 'parserexe3', 'author': 'parserexe3' }; </script> <!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(32395810, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/32395810" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <!--/noindex--> <nav id="top-nav"> <ul id="menu-top" class="top-menu clearfix"> </ul> </nav> </div> </div><!--.container--> </footer> <script type='text/javascript'> /* <![CDATA[ */ var wpcf7 = {"apiSettings":{"root":"https:\/\/present5.com\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"}}; /* ]]> */ </script> <script type='text/javascript' src='https://present5.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.4'></script> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/jquery.shuffle.js?ver=4.9.25'></script> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/scripts.js?ver=1.13'></script> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/shuffle.js?ver=4.9.25'></script> <!--[if lt IE 9]> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/selectivizr.js?ver=1.0.2'></script> <![endif]--> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/notify.js?ver=1711656232'></script> <script type='text/javascript'> /* <![CDATA[ */ var my_ajax_object = {"ajax_url":"https:\/\/present5.com\/wp-admin\/admin-ajax.php","nonce":"5a6b2ba9c0"}; /* ]]> */ </script> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/filer.js?ver=1711656232'></script> </body> </html><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>