Вы находитесь на странице: 1из 7

Ссылки html

<a href="адрес ссылки" target="_blank">текст ссылки</a>

<a href="https://ru.wiktionary.org/wiki" target="_blank">модернизации</a>

Важный атрибут target – определяет окно браузера в которое должен быт загружен ресурс

Возможные значения для target:

Blank – ресурс загружается в новом окне

Self - ресурс загружается в текущем окне, является значением по умолчанию.

Подробнее http://htmlbook.ru/content/atribut-target

Ссылку можно назначат на любой объект например картинку.

Пример исползования на текст

<a href="1html" target="_blank">перейти на первую страницу</a>

1html – адрес, по которому будут переходит по нажатию на ссылку;

Перейти на первую страницу -текст по которому будут кликат

<img src="Images/DOG.jpg" alt="собака" height="250"> - уровен ниже если переместили в другу


папку лежащую в директории где был файл

../ - выйти из папки , поднятся на уровен выше

../приImages/ искат на уровен назад и в определенной папке

<img src=".../Images/DOG.jpg" alt="собака" height="250">

/ - корневой каталог веб сервера или логического диска

./ -текущий каталог

../ - родителский каталог

Каталог/ - дочерний каталог

Для пункта напишите нам - <p><a href="mailto:info@gmail.com">Напишите нам</a> </p>


Якорные ссылки

Что бы пометит документ исползуется атрибу id-уникалный идентификатор элемента

<ol type="I" id="spisok"> - сперва кидаем якор на объект на странице

<li><a href="#spisok">Список</a></li> - ПУТ К ЯКОРЮ

Стили для ссылок

a:link – не посещенная

a:visited – посещенная

a:hover –над которой находится указател мыши

a:active – нажатая над которой удерживается мыш

важен порядок сверху вниз

a{

text-decoration: none – нет подчеркивания

a:hover{

text-decoration: underline –ест подчеркивание при наведении

Так же можно настроит внешний вид нижней границы ссылки.

a{

text-decoration: none

border-bottom: 2px, dashed Darck Ochid;

padding-bottom: 3px;

Ссылки-кнопки

Любая ссылка по умолчанию является строчным элементом, т.е значение display для нее
равняется inline. Что бы сделат кнопку это значение требуется изменит на block или inline-block.

Так же нам потребуются отступы внутренние и внешние ( padding, margin ).

И какой нибуд эффект для перехода при наведении курсора мыши, т.е. transition

Класс button универсален для всех возможных кнопок


Пример:

a.button {

text-decoration: none;

display: inline-block;

padding: 5px 10px;

margin: 0 20px;

transition: .3s ease-in-out;

Простейший но не уверсалный

.type1 {

color: #BA7D67;

border: 2px solid transparent;

.type1: hover {

border: 2px solid #BA7D67;

<link rel="stylesheet" href="buttons.css"> - подшивание класса кнопок

<p align="center" ><a href="#" class="button type1">первая кнопка</a></p> -кнопка html

Вариант оформления кнопки css

a.button {

text-decoration: none;

display: inline-block;

padding: 5px 10px;

margin: 0 20px;

transition: .3s ease-in-out;

}
.type1 {

color: #BA7D67;

border: 2px solid #BA7D67;

.type1: hover {

border: 2px solid #BA7D67;

2 прим css

.type2 {

color: #f8f7ff;

border-radius: 25px;

border: 3px solid #f8f7ff;

.type2:hover {

color: #0d0d0c;

background: #d7fc00;

4в кода(css+html}

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> <!-- Указываем кодировку для браузера -->

<title>Моя первая страница</title>

<link rel="stylesheet" href="style.css" type="text/css">

<link rel="stylesheet" href="buttons.css">


</head>

<body>

<div id="block1"> <!-- идентификатор id -->

<div class="main-menu two"> <!-- прим создания меню, стил в css/ -->

<menu>

<li><a href="#">Главная</a></li>

<li><a href="#">Работы</a></li>

<li><a href="#">О нас</a></li>

<li><a href="#">Блог</a></li>

<li><a href="#spisok">Список</a></li>

<li><a href="#">Контакты</a></li>

</menu>

</div>

<h1>Главный заголовок</h1>

<h2 align="right" class="red">чуть меньше</h2>

<h3>еще меньше</h3>

<h4>и еще</h4>

<h5>и снова еще меньше</h5>

<h6>самый маленький</h6>

<p>Обычный текст здесь, этот кушает форматирование</p>

<pre>этот дает возможность форматировать

как Х О Ч Е Ш ь</pre>

<p>Но можно сделать перенос <br>Так</p>

<img class="img-center" src="cat2.jpg" alt="кот" width="150px">

<p align="justify" class="red">Разнообразный и <b>богатый</b> опыт <i>сложившаяся</i>


структура <u>организации</u> представляет собой интересный эксперимент проверки
существенных финансовых и административных условий. Товарищи! реализация намеченных
плановых заданий обеспечивает широкому кругу (специалистов) участие в формировании новых
предложений. Разнообразный и богатый опыт постоянное информационно-пропагандистское
обеспечение нашей деятельности обеспечивает широкому кругу (специалистов) участие в
формировании позиций, занимаемых участниками в <b><i><u>отношении</u></i></b>
поставленных задач. Товарищи! дальнейшее развитие различных форм деятельности позволяет
выполнять важные задания по разработке новых предложений. Значимость этих проблем
настолько очевидна, что реализация намеченных плановых заданий позволяет выполнять важные
задания по разработке форм развития.<br>

Задача организации, в особенности же <a href="https://ru.wiktionary.org/wiki/%D1%83%D0%BA


%D1%80%D0%B5%D0%BF%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5">укрепление</a> <!-- вставка
ссылки где хештег заменется на нужное--> и развитие структуры играет важную роль в
формировании новых предложений. Равным образом дальнейшее развитие различных форм
деятельности влечет за собой процесс внедрения и модернизации соответствующий условий
активизации. Товарищи! реализация намеченных плановых заданий влечет за собой процесс
внедрения и <a href="https://ru.wiktionary.org/wiki/%D0%BC%D0%BE
%D0%B4%D0%B5%D1%80%D0%BD%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F"
target="_blank">модернизации</a> соответствующий условий активизации. Не следует, однако
забывать, что укрепление и развитие структуры позволяет выполнять важные задания по
разработке новых предложений. Разнообразный и богатый опыт консультация с широким
активом обеспечивает широкому кругу (специалистов) участие в формировании соответствующий
условий активизации. Разнообразный и богатый опыт сложившаяся структура организации
обеспечивает широкому кругу (специалистов) участие в формировании форм развития.</p>

<a href="https://ru.wikipedia.org/wiki/%D0%95%D0%BD%D0%BE%D1%82%D1%8B"><img
src="enot.jpg" alt="енот" height="250"></a>

<img src="Images/DOG.jpg" alt="собака" height="250">

<!-- Так пишутся комментарии -->

<ul type="circle"><!-- маркированный список где type="и тип" вид маркера -->

<li>кот</li>

<li>енот</li>

<li>собака</li>

<li>неизвестный</li>

</ul>

<ol type="A" start="3"> <!-- нумерованный список где type="1,A,a,I,i", start="цифра- начало отсчета"
-->

<li>кот</li>

<br> <!-- разрыв -->

<li value="5">енот</li> <!-- принудителное назначение нумерации -->

<li>собака</li>

<li>неизвестный</li>
</ol>

<h4>мои вещи</h4>

<ol type="I" id="spisok"> <!-- вложенный спписок -->

<li>носки</li>

<ul>

<li>красные</li>

<li>синие</li>

<li>зеленые</li>

</ul>

<li>джинсы</li>

<li>рубашки</li>

</ol>

<p align="center" ><a href="#" class="button type2">первая кнопка</a></p>

</div>

<p><a href="mailto:info@gmail.com">Напишите нам</a> </p>

</body>

</html>