HTML — Базовый курс 7


93 просмотра.

Краткое описание видео: .продолжаем изучать html.данный урок будет посвящен ссылкам.ссылкам с одной страницы на другую.ссылку на закачку файлов с вашего сайта.ссылку на ваш электронный почтовый ящик.и так далее ссылок бывает много разных и.о том как они создаются какие у них.атрибуты есть мы сейчас с вами и.поговорим и так что нам понадобится для.этого урока.во-первых нам понадобится еще одна.страница и какой-нибудь файл который мы.будем давать людям для скачивания для.этого на диске c в своей папке html либо.на другом диске где вы создавали эту.папку скопируйте в нее какой-нибудь файл.для работы то есть файл отличный от.расширения html допустим какой нибудь.архив формате rar и zip и так далее.потому что наиболее типичное на.веб-страницах размещают файлы именно.архивировано в виде доедают их для.скачки на кроме этого это может быть.музыка какая-то и так далее да то есть.любой файл который вы хотите дать людям.для скачивания кроме этого нам.понадобится еще одна html-страница ее.можно создать прям из этой странице до.для этого переходим html код здесь.выбираем файл сохранить как и сохраняем.ее допустим вот именем.тест пэйдж test rich ..html нажимаем сохранить проверяем что у.нас папке появился еще одна.html-страница возвращаемся.блокнот и допустим изменим ей название.чтобы она у нас была отличная от той да.так допустим она будет называться нас.тестовая страница.тестовая страница 100.здесь буквально один заголовок и.допустим напишем здесь.проверка ссылок так и все оставим два.абзаца больше здесь нам ничего не нужно.удаляем все сохраняем данную страницу.так и открываем опять нашу открыть.индекс все открыли теперь у нас папке.есть тестовой страницы и тестовый файл.который мы будем давать людям.для скачивания все возвращаемся в код и.сейчас мы будем говорить о тегах.который отвечает за создание ссылок и об.атрибутах.не так самый главный трек который.позволяет создавать.ссылку это т.к. а очень просто.запоминается давайте его создадим.где-нибудь здесь ссылка создается как я.уже сказал с помощью только а открыли.так и закрываем вот у нас ссылкам все.что мы напишем между этими тегами будет.называться якорем ссылки то есть его.видео видимой частью ссылки datawiz как.раз-таки тот элемент который обычно на.странице подчеркивается давайте.попробуем здесь написать ссылка на.тестовую страницу.и сохраним данную страницу и посмотрим.что у нас получилось мы видим что у нас.появилась новая ссылка но она пока она.станет действовать ничего с ней сделать.нельзя это происходит потому что мы не.указали никаких атрибутов и.соответственно ссылаться ей пока никуда.мы не указали куда ей нужно ссылаться.соответственно мы сейчас это сделаем.самой основной атрибут ссылки это.атрибут аж лев пишется таким образом как.раз таки он отвечает за то куда ссылка.должна ссылаться здесь мы вот между.двойными кавычками должны указать ту.страницу на которую эта ссылка будет.ввести на страницу у нас называется тест.патч точка html.как здесь и пишем тест пейдж ..hdmi так как страницу нас лежит в той же.папке.нам никаких здесь больше пути писать не.нужно просто пишем тест притчи . html.сохраняем данную страницу.проверяем браузере видя что у нас ссылка.превратилась ссылку то есть мы указали.атрибута шериф теперь известно куда.ссылкам будет ссылаться если мы нажимаем.на эту ссылку у нас загружается тестовая.страница понятно да как действует ссылки.ничего сложного в них нет возвращаемся.назад.даришь и какие еще атрибуты вы должны.знать у ссылок следующие атрибуты то.прям but to get пишется таким образом и.отвечает этот атрибут.за открытие ссылки да то есть если в.данном случае мы нажимаем у нас ссылка.открывается в том же окне то есть она.замещает ту страницу да то если мы хотим.чтобы ссылка открывалась в новом окне.мы как раз таки с помощью атрибута.tagged можем.прописать соответствующую команду.запомните чтобы открыть ссылку в новом.окне нужно писать здесь бланк сначала.ставим символ подчёркивания вот такой.затем пишем бланк вот теперь если мы.сохраним давно границу и попробуем.нажать на сук сначала обновим попробуем.нажать на ссылку то увидел что у нас.тестовая страница открылась в новые.вкладки на это не закрылась тесто.становится открылась в новом окошке вот.таким образом работает этот атрибут.тоже очень часто используется поэтому.имейте в виду и последний атрибут.которые вам нужно знать это атрибут.тайтл.атрибута этого он не обязательный но его.можно ставить это атрибут который в.которой прописывается основная тема.страница на которую мы ссылаемся да то.есть если мы допустим ссылаемся на.страницу там про лимон и здесь можно.написать допустим про лимон и если мы.там ссылаемся на страницу про.автозапчасти здесь можно писать там.сайт про автозапчасти атрибут он больше.конечно для поисковых систем но в любом.случае если мы представляем этот атрибут.и здесь ну допустим обновим страницу.наведем на ссылку мы увидим что.появляется такая подсказка до которая.говорит о чем будет говориться на той.странице на которую мы перейдем вот что.касалось.ссылки на другую страницу кроме этого мы.можем ссылаться как бы не только на.страницу нашего же сайт да на который мы.сейчас находимся мы спокойно можем.ссылаться на страницу.какого нибудь сайта который находится в.интернете и не связан с нашим да как это.делать а давайте создадим еще одну.ссылку для этого перейдем на следующую.строку.поставим здесь так переноса бэрда и.настоящий строке уже создадим еще одну.ссылку на страницу удаленного сайта.который находится где-то в интернете.задаем т.к. опять-таки к пропишем куда.ссылкам будет ввести допустим ссылка.будет вести на сайт.photoshop мастер и соответственно.пропишем атрибут hf равно и вот здесь.нам нужно прописать полный путь до сайта.то есть пишем http : 2 слыша 3w ..и полный адрес сайта здесь можно пять.дней прописать атрибута гид не сказать.чтобы данный сайт открывался у нас в.новом окне.а при будь это этого мы пропишем уроки.photoshop.отлично теперь сохраняем данную ссылку.страницу обновляем здесь you и видим что.у нас появилась еще одна ссылка.уроки photoshop нажимаем на страницу.открывается в новом окне.и здесь грузится сайт фотошоп-мастер вот.таким образом создаются ссылки на.удаленные ресурсы на удаленные сайта.идем дальше следующий вид ссылок это.ссылка на скачивание файла если мы хотим.дать человеку файл на закачку мы должны.создать еще один тип ссылок для этого.переходим на новую строкой 5mt переносом.и создадим еще одну ссылку в якоре.который будет слова скачать файл.то есть вы уже неоднократно я думаю.встречали такие ссылки по которым.нажимаешь и начинается закачка файла.здесь все очень просто вот ребута шрифт.мы просто прописываем адрес где лежит.наш файл и все ничего сложного так как.файл нас лежит в той же папке мы просто.пишем его имя тест ..rar ..если вы хотите чтобы файл скачался.опять-таки в новом окне можно приписать.парке бланк.и поэтому можно указать о чем речь.пойдет в этом файле.там допустим песни какая-нибудь.сохраняем обновляем здесь нашу страницу.видим что у нас появилась еще одна.ссылка.причем заметьте что уже посещённые нами.ссылки отличаются по цвету от не.посещенных вот об этом мы еще поговорим.чуть позже а сейчас этот имеете ну что.не посещенные ссылки они отличаются по.цвету от посещенных теперь давайте.проверим если мы нажимаем на скачать.файл.что у нас происходит у нас открывается.новая вкладка и нам предлагаются скачать.файл вот так работают ссылки на.скачивание файлов.идем дальше следующий тип ссылок это.ссылка на ваш e-mail адрес.ведь если вы хотите сделать так чтобы у.вас на сайте была ссылка по которой.человек нажимает и у него сразу.загружается почтовые программы где он.может написать вам письмо вы можете.создать такую ссылку делается это очень.просто опять-таки создаем т.к. в его.якорь и пишем написать мне письмо и в.атрибуте архив прописываем следующие.напишем mild у такую строй.двоеточие и указываем ваш электронный.адрес куда вы хотите получать письма.допустим укажем какой-нибудь адрес тест.собачка mail.ru.файл сохранить обновляем у нас появилась.еще одна ссылка.и теперь если мы по ней нажимаем в итоге.через некоторое время загружается.почтовая программа сразу с открытым.письмом да и вставленным адресом тем.которые мы указали на странице в ссылке.на вот так создаются ссылки на адрес.электронной почты.так следующий момент о которой мы с вами.здесь поговорим это ссылка на.определенную часть страницы присылаться.можно не только с одной страницы на.другую да можно ссылаться с одного места.одной и той же странице на друга и.местные перед странице это бывает.полезно когда вы допустим рассказывайте.о каком-то товаре да она форма заказа.этого товар находится далеко внизу то.есть вы можете на протяжении.текста расставить несколько ссылок.перейти к форме заказа человек нажимаем.такую ссылку будет сразу переходить на.эту же страницу просто форме заказа.как такие ссылки делаются мы сейчас с.вами посмотрим ничего сложного в них нет.итак сначала нам нужно поставить метку.куда будет человек переходить в случае.нажатия по такой ссылке на давайте.допустим где наши страницы поставим.метку вот сюда самое начало списка будем.думать что это та часть текста которая.может человеку понадобится во время.чтения допустим верхние части найдем наш.список и перед ним создадим специальную.метку на которую человек будет попадать.ставится на также как ссылка просто.никаких атрибутов.указываем только атрибут name.специальный атрибут для метки.вот и в качестве имени даем какой-нибудь.имя допустим list список теперь в том.месте где мы хотим сделать ссылку на эту.метку.мы пишем обычную ссылку на пусть он.здесь до 100 м перенос и создаем еще.одну сумку здесь качестве атрибута а.шлейф указываем здесь как раз таки эту.метку указываться она через решетку.ставим решетку пишем лист и здесь в.якорь от пропишем на хотел ссылка или не.смог лучше перейти к списку.или тег списку вот так будет лучше.теперь если мы сохраним данную страницу.обновим нашу его браузере мы видим что у.нас появилась еще одна ссылка если мы по.ней нажимаем то видим что у нас.перекидывает сразу на список вот так.работают ссылки на часть на такую ли.определенную часть документа.таким же образом можно сослаться на.допустим определенную часть другой.странице вот у нас есть тестовой.странице да правда на нос маловато можно.было также прописать вот здесь.какую-нибудь метку и здесь вот где мы.делали ссылку на эту тестовую страницу.спирт по и сюда можно было указать.спокойно.еще через решетку эту самую метку.которую мы там поставили нам от это тоже.имеете ввиду.и последний момент о котором я здесь.хотел вам рассказать.этот цвет цвет асыл ана естественно в.данном случае у нас.посещенные ссылки они фиолетовые.не посеченные синие то мы можем это.исправить если напустим цвет этих ссылок.не подходит остальное дизайн страницы.мы можем это легко исправить для этого.возвращаемся в html-код не справляется.это в теге body.все так будет тоже есть свои атрибуты и.некоторые из них отвечает как раз из-за.цвет ссылок.первый из них это атрибут link он.отвечает за то какого цвета будут ссылки.которые еще не были похищены из леса по.умолчанию они синие а вы хотите сделать.красными допустим да напишем линк и.здесь допустим бежим red.если это означает что не посещенные.ссылки будут красными теперь если мы.хотим изменить цвет уже посещенных.ссылок данное случайный у нас фиолетовые.мы хотим и сделать допустим черными.пишем уэллинг извилин когда означает уже.посещённые ссылки и в качестве значения.атрибута пишем напустим благ черные на и.последний.атрибут отвечающий за ссылки за цвета.ссылок точнее это атрибут a link.activelink на активная ссылка когда этот.цвет будет передаваться ссылки в момент.нажатия да по ней пишем а линк и цвет.этой ссылке напустим будет нас зеленый.момент нажать и пишем green.выбираем файл сохранить давайте для.примера создадим еще одну ссылку чтобы у.нас была какая-нибудь ссылка которую еще.никто не посещал и пусть она у нас ведет.допустим на яндекс.yandex.ru.так и закрываем здесь ссылку и яндекс.сохраняем данность разницу.medium браузер обновляем мы видим что у.нас посещенные ссылки стали черные они.посещенные красные до в момент нажатия.не должны быть зеленый и вот я нажимаю.на становится зеленый мы переходим к.списку до.возвращаемся все она у нас уже стал.посещённый нажимаем на яндекс он.становится зеленым у нас перекидывает на.яндекс.причем мы видим что он по ссылке который.ведет на определенную часть разница у.неё такая особенность что она при.перезагрузке страницы мы не считает себя.уже посвященный и остается также как.будто ее еще не посещали.остальные ссылки ведут себя как положено.он в принципе все что я хотел вам здесь.рассказать теперь вы знаете как.создается ссылки на страницу я провожу.сайта как создается ссылки на страницу.другого сайта как станет ссылки на.скачивание файла на написание писем на.определенную часть документа и.знаете как менять их цвета на этом я.данный урок заканчиваю увидимся в.следующем

HTML — Базовый курс 7

Как? Вы еще не смотрели? Ну это зря...