Чат Telegram
Группа ВКонтакте
Новый комментарий


Hunter

как мне сделать также как и на образце

ivashkevich

Вам нужно создать 2 странички - book1.html и index.html. В них положить приведенные примеры. Всё :)

Hunter

Спасибо

Julia0603

а почему вместо div используются теги p для образования блоков с информацией? насколько я помню статью - код с душком - это не правильно и далеко не эталонно в качестве примера...как и большое кол-во br в разметке...

ivashkevich

Привет! В данном курсе нет блочной верстки, поэтому о div-ах здесь нет речи.
Что касается тега p - именно его нужно использовать для разбиения текста на абзацы, независимо от того, используются div-ы или нет.
div-ы нужны для разбиения на функциональные блоки. Например, для отделения текста статьи от сайдбара. Но их не стоит использовать для разбиения на абзацы.

ImmortalPsych

Сделал свой двухстраничный сайтик, скинул себе в вк сообщением, попытался открыть через устройство, на котором нет файлов формата .html (они есть только на компе), не открывается... Скинул файлики .html на телефон, открываются браузером.
Вывод: до сих пор я учился делать локальные сайты. Думаю, в продолжении узнаю, как делать общедоступные:)

ivashkevich

Да, впереди вас ждёт урок о том, как выложить сайт в интернет =)

ImmortalPsych

А так вот он, мой сайт на данный момент. Информацию, ясное дело, я брал с других сайтов.

1 страница:

<!DOCTYPE=html>
<html>
<head>
    <meta charset="utf-8">
    <title>Как выбрать смартфон?</title>
    <meta name="keywords" content="смартфоны, информационные технологии, ит, айти, ай ти, it, 2018, технологии" >
    <meta name="description" content="Жизнь современного человека невозможно представить без мобильного устройства – с тех пор, как мобильный интернет получил широкое распространение, пользователи стали проводить перед экраном <b>смартфона</b> еще больше времени, чем за компьютером. Однако, как правило, о гаджетах мы знаем столько же, сколько о наших организмах – чуть больше, чем <i>ничего</i>.">
</head>
<body>
<h1>Как выбрать смартфон? Руководство по покупке: 5 вещей, которые нужно знать:</h1>
    <ol>
        <h2><li>Выберите подходящую операционную систему (ОС)</li></h2>
        <h2><li>Выбираем размер смартфона: фаблет или не фаблет?</li></h2>
        <h2><li>Обращайте внимание на эти характеристики</li></h2>
            <ul>
                <h3><li>Процессор</li></h3>
                <h3><li>Оперативная память (RAM / Random Access Memory)</li></h3>
                <h3><li>Объём встроенной памяти и  её расширение</li></h3>
                <h3><li>Экран</li></h3>         
            </ul>
        <h2><li>Фотокамера в смартфоне (не придавайте слишком большое значение количеству мегапикселей)</li></h2>
        <h2><li>Проверьте выносливость аккумулятора</li></h2>
    </ol>
<h1>Разобрались? <a href="Рейтинг лучших.html">Тогда перейдём к 5 лучшим смартфонам 2018 года в соотношении цена/качество!</a></h1>
</body>
</html>

2 страница:

<!DOCTYPE=html>
<head>
    <meta charset="utf-8">
    <title>Рейтинг смартфонов 2018 года</title>
    <meta name="keywords" content="смартфоны, информационные технологии, ит, айти, ай ти, it, 2018, технологии, топ смартфонов, цена/качество">
</head>
<body>
<pre>                                                       <a href="Смартфоны.html">Вернуться назад</a></pre>
<h1>Рейтинг смартфонов 2018 цена/качество и их характеристики:</h1>
    <ol>
        <h2><li>OnePlus 5T</li><h2>
            <ul>
                <li>Диагональ экрана: 6 дюймов</li>
                <br><li>Разрешение: 2160х1080</li>
                <br><li>Вес: 162 г</li>
                <br><li>Количество SIM-карт: 2</li>
                <br><li>Процессор: Qualcomm Snapdragon 835</li>
                <br><li>Объем памяти: 64 Гб</li>
                <br><li>Объем ОЗУ: 6 Гб</li>
                <br><li>Емкость аккумулятора: 3300 мАч</li>
                <br><li>Основная камера: двойная 16/20 МП</li>
                <br><li>Поддержка карт памяти: нет</li>
                <br><li>Поддержка сетей 4G: есть</li>       
            </ul>
        <h2><li>Samsung Galaxy Note 8 64GB</li><h2>
            <ul>
                <li>Диагональ экрана: 6,3 дюйма</li>
                <br><li>Разрешение: 2960×1440</li>
                <br><li>Вес: 195 г</li>
                <br><li>Количество SIM-карт: 2</li>
                <br><li>Процессор: Exynos 9 Octa 8895</li>
                <br><li>Объем памяти: 64 Гб</li>
                <br><li>Объем ОЗУ: 6 Гб</li>
                <br><li>Емкость аккумулятора: 3300 мАч</li>
                <br><li>Основная камера: двойная 12/12 МП</li>
                <br><li>Поддержка карт памяти: есть</li>
                <br><li>Поддержка сетей 4G: есть</li>   
            </ul>
        <h2><li>Google Pixel 2</li><h2>
            <ul>
                <li>Диагональ экрана: 5 дюймов</li>
                <br><li>Разрешение: 1920×1080</li>
                <br><li>Вес: 143 г</li>
                <br><li>Количество SIM-карт: 1</li>
                <br><li>Процессор: Qualcomm Snapdragon 835</li>
                <br><li>Объем памяти: 64 Гб</li>
                <br><li>Объем ОЗУ: 4 Гб</li>
                <br><li>Емкость аккумулятора: 2700 мАч</li>
                <br><li>Основная камера: двойная 12 МП</li>
                <br><li>Поддержка карт памяти: нет</li>
                <br><li>Поддержка сетей 4G: есть</li>       
            </ul>
        <h2><li>Honor 9 Lite</li><h2>
            <ul>
                <li>Диагональ экрана: 5,65 дюйма</li>
                <br><li>Разрешение: 2160×1080</li>
                <br><li>Вес: 149 г</li>
                <br><li>Количество SIM-карт: 2</li>
                <br><li>Процессор: HiSilicon Kirin 659</li>
                <br><li>Объем памяти: 32 Гб</li>
                <br><li>Объем ОЗУ: 3 Гб</li>
                <br><li>Емкость аккумулятора: 3000 мАч</li>
                <br><li>Камера: 13/2 МП</li>
                <br><li>Поддержка карт памяти: есть</li>
                <br><li>Поддержка сетей 4G: есть</li>       
            </ul>
        <h2><li>iPhone X</li><h2>
            <ul>
                <li>Диагональ экрана: 5,8 дюйма</li>
                <br><li>Разрешение: 2436×1125</li>
                <br><li>Вес: 174 г</li>
                <br><li>Количество SIM-карт: 1</li>
                <br><li>Процессор: Apple A11 Bionic</li>
                <br><li>Объем памяти: 256 Гб</li>
                <br><li>Объем ОЗУ: 3 Гб</li>
                <br><li>Емкость аккумулятора: 2716 мАч</li>
                <br><li>Основная камера: двойная 12/12 МП</li>
                <br><li>Поддержка карт памяти: нет</li>
                <br><li>Поддержка сетей 4G: есть</li>   
            </ul>
    </ol>
<h1>Ну вот и всё, выбор за вами!</h1>
</body>
</html>

!!!НЕ ЗАБУДЬТЕ СИНХРОНИЗИРОВАТЬ НАЗВАНИЯ ФАЙЛОВ И ССЫЛОК В КОДАХ!!!

ivashkevich

Отлично! Но не забывайте, что на странице должен быть только один h1 заголовок. Это очень важно для SEO.

nastasya95

Я правильно понимаю, что для создания сайтов используем относительные ссылки (короткие) формата <a href="index.html">Вернуться к списку книг</a> ?
или и абсолютные можно использовать ?

ivashkevich

Как правило абсолютные, начиная со слеша:

/link.html
levenetslev

Орнул с "небольшая сказка про мучное изделие с большими амбициями"

Summers

Прикольно :D

ivashkevich

А то!

Summers

На этом задании реально пришлось немного поработать. Зато как же потом отлегло, когда всё получилось :)

ivashkevich

Это отлично!

kekspeks

Я не понимаю, либо я делаю все неправильно, либо я сверхразум?
Как-то мне это просто дается, все работает. И логика понятна с первого раза.

Хотя еще есть третий варик: Артем - отлично объясняет)))

ivashkevich

HTML - это просто, всё норм)

olga-ok

Здравствуйте. Создала ссылки друг на друга на двух файлах - они не открываются... Пишет, что файл не найден, перемещен или удален. Перед этим удалила все предыдущие из прошлых уроков. Зря удалила?

ivashkevich

Здравствуйте. Ну ссылки должны вести на существующие файлы. Раз не открываются, значит нужно их создать.

Liynar

Не совсем понялпро . и .. Где на жестком диске иммено надо искать эти точки?
И откуда взялись
post/1
./frontend
../post/1
и с постом 696 697 к сожалению тоже не очень разобрался(

ivashkevich

. - это текущая папка
.. - это папка на уровень выше (та, в которой лежит текущая)

Что именно непонятно про посты?

rus13mus06@gmail.com

style="width:700px">
А это для чего?

ivashkevich

Ширина для блока.

mr.niks2007@gmail.com

первая страница

<!DOCTYPE html>
    <html>
    <head>
           <!--Подкл стилей css-->
        <style>
        <link href="style.css" rel="stylesheet"/>
        </style>
        <meta charset="utf-8"/>
        <title>Minecraft servera.ru</title>
            <!--Реклама-->
        <meta name="keywords" content="Майнкрафт,майнкрафт странички,популярный майнкрафт сайт,скачать майнкрафт,майнкрафт моды на все версии">
<meta name="description" content="Здарова майнкрафет Это сайт интересен модами и другими штучками задоди :)"/>
    </head>
    <body>
            <!--Текст основной страницы-->
        <script src="script.js">
        </script>
    <h1>Гланая страница</h1>  
<hr>    
    <h2>Minecraft просторы</h2>
<strong>Здраствуйте-Я придумал интересный сайт по майнкрафт где находится много чего например текстуры давайте разберём что это?</strong>
        <hr>
        <h3>Что такое текстуры?</h3> 
        <p>текстуры это очень важная часть <em>minecraft</em> например небудь текстур то игру врятли можно назвать было бы майнкрафтом ведь был бы просто </br>
        черный экран текстуры имеют свой можно сказать разрешение например 32битные самое минимальные рарешение это 16бит это разширение вы можете скачать на нашем сайте
        самоое высокое 164бит но не каждый компьютер потянет такое качество по обычному текстуры <em>Minecraft</em> стандартые имею 64бит разрешение вот вы и все поняли по
        текстурам теперь давайте про моды!!!</p>
        <hr>
        <h3>что такое моды?</h3>            
        <p>моды это добавление в игру чегото нового например мод на огурцы он добавит огурцы на нашем сайте присутсвует много модов качайте и наслаждайтsaaaесь 
        игрой :) а ещё я вам расскажу про версии?</p>
        <hr>
    <h3>Что такое версии?</h3>            
    <p>версии это спец сборка файлов игры чем новея версия тем больше файлом или пофикшено файлом (такое тоже бывает) например самая сарая версия
    0.0.1 имеет очень много фикшеных файлов из 0.0.1 удали файло в новой версии 1.14.0 больше середины и добавлено в 1000процентов больше
    файлов бывает файлы влияют на выделяемую память для них например файл весит 3кб и выделяют от 26бита оп (приблизительно)</p> 
    <hr>
    <h3>что есть на нашем сайте?</h3>
    <strong>Скачать версии майнкрафт:</strong>

    <ul>
    <li>Текстуры</li>
    <li>Моды</li>
    <li>игровые клиенты(версии)</li>
    <li>шейдеры</li>
    <li>новейшие новости майнкрафт</li>
    </ul>
    <a href="https://webshake.ru/html-training-course/24">помошник по зоздание сайта</a> <br/>
    <a href="version.html">скачать версии</a>

    </body>
    </html>
<!DOCTYPE html>
<html>
<head>
<!--Разл.подкл стилей,кейворды и т.д-->
<title>Pc servers minecraft.ru</title>
<meta charset ="utf-8"/>
<style><link href="style.css" rel="stylesheet"/></style>
<meta name="keywords" content="site block"/>
<meta name="description" content="No description"/>
</head>
 <body>
<strong>Выберите версию представленную ниже:</strong> </br>
<!--ещё недостаточно умен чтобы делать собственные создание скачек игры-->
<a href=>1.0.0</a> </br>
<a href=>1.1.0</a> </br>
<a href=>1.2.0</a> </br>
<a href=>1.3.0</a> </br>
<a href=>1.4.0</a> </br>
<a href=>1.5.0</a> </br>
 </body>
</html>

сойдет 67строчный код :)

ivashkevich

<a href=>1.0.0</a>
href не может быть пустым

Veronika

страница раз

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="keywords" content="web, программист, разработчик, junior, html, php, резюме">
        <meta name="description" content="Талантливый начинающий программист, с горящими глазами. С удовольствием приму участие как в проектировании и разработке новых проектов, так и в доработке и совершенствовании существующих">
        <title>Лучший программист Шадрина Вероника</title>
        <link href="style.css" rel="stylesheet"/><!--подключенные внешние стили. находятся в файле style.css-->
    </head>
    <body>
<h1>Шадрина Вероника</h1>
<h2>Контактная информация</h2>
<p>телефон</p>
<p>адрес</p>
<hr>
<h2>Мои навыки</h2>
<ul>
<li>языки программирования
<ul>
    <li>HTML</li>
    <li>PHP</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>
</li>
<li>программы
<ol>
    <li>notepad++</li>
    <li>Open Server</li>
    <li>PhpStorm</li>
</ol>
</li>
</ul>
<h2>Мой опыт работы</h2>
<a href="experience.html">[можно посмотреть здесь]</a>
<hr>
<h2>Обо мне</h2>
<a href="https://vk.com/veronika_shadrina"></a>
     <script src="scripts.js"></script><!--подключенные внешние скрипты. находятся в файле scripts.js-->
    </body>
</html>

страница два

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Опыт работы</title>
    <meta name="keywords" content="опыт, опыт работы">
    <meta name="description" content="Путь моей деятельности, до того как я открыла для себя программирование">
</head>
<body>
<a href="index.html">Вернуться к резюме</a>
<h1>Организации в которых я работала</h1>
<h2>Организация 1</h2>
<p>Наименование<br>Сфера деятельности<br>Адрес</p>
<h3>Должность</h3>
<h2>Организация 2</h2>
<p>Наименование<br>Сфера деятельности<br>Адрес</p>
<h3>Должность</h3>
<h2>Организация 3</h2>
<p>Наименование<br>Сфера деятельности<br>Адрес</p>
<h3>Должность</h3>
</body>
</html>

я правильно поняла: использовать относительные или неполные абсолютные мы можем только в том случае, если уже находимся почти там? в той папке или в на том сайте, но на другой странице?

ivashkevich

Именно так - относительно пути текущей страницы. Нет такого понятия, как неполные абсолютные, это вы сами придумали)

Artemy

Привет! У меня вопрос. Допустим мне, на главной странице, нужно создать ссылки на 99 моих же страниц. Получается, в одной папке у меня лежат все мои 100 файлов HTML и к каждому из них необходимо сделать отдельный CSS файл?

ivashkevich

Привет. Файл создаётся один. И одинаково везде подключается.

Самый понятный курс PHP
Онлайн-уроки в удобное время!
Начать бесплатно
Логические задачи с собеседований