Новые знания [100] Учимся вместе - 3. Стодневка завершена

[Лесная Катананхе]

Каникулы в Помодоро))

хитрая какая

 

[Лесная Катананхе]

Боже, что же они так картавят?

И ноги не очень - кривые

ты на язык смотри, а не на ножки

 

[Лесная Катананхе]

А вот видео к моему отчету

Какое-то время вымирание?

 

[Лесная Катананхе]

Нарисовано это цветными карандашами, знаете.

Здорово

я все выходные дружил фаервол и apache

Они рады были?

всем известный Wordpress

Ага, да-да как сейчас помню у дедушки Ленина на броневике такой движок стоял

Уровень прогресса не скажу

Какой ты загадочный в этот раз

 

[Лесная Катананхе]

В связи с поездкой прогресса по травкам на этой неделе никакого нет . Буду наверстывать на этой неделе.

На следует неделе жду в двойном размере

 

[Лесная Катананхе]

Отчет
Прогресс - 0%

Ну ващеееее

 

[Лесная Катананхе]

Отчёт за неделю
Смотрю много видео на ютубе, читаю журналы, прогресс 90%

Где то сгрызла 10% давай до 100 к выходным

 

[Валех Рзаев]

Отчет за неделю.
Английский язык: Пока еще изучаю To be и артикли. Еще смотрю любимый сериал в оригинале . На эту неделю ставлю цель зазубрит 500 слов. Надеюсь применяемый новый подход поможет делу. Прогресс 50% (так как уроки следующей недели не были закончены).
ПДД: Прогресс 40%.

 

[игоряшкаNS]

я до сих пор на Windows ХР, это на рабочем компе, а в ноте 10, но кто что скажет лучше ХР пока нет нечего. мне так кажется.))

Согласен, чума а не движок.

 

[игоряшкаNS]

ты на язык смотри, а не на ножки

А для чего она их обнажает, язык не высовывает наружу то?

 

[Nastasik]

Ну ващеееее

Что? Вылетела я, да?

 

[Олух Царя Небесного]

@Каракатица, @Январь, @Jenidalini, спасибо девчонки за поздравляшки =) Мур, мур, мур! =)

Согласен, чума а не движок.

Это скорее "чума", чем "движок" =) Ну окай я не вмешиваюсь, а по поводу ножек, вот мое предложение:

Что? Вылетела я, да?

Да неее, не вылетела, еще до вторника целый сегодняшний вечер =) Давай я помогу набрать сразу процентов 50? =) Ты ведь html и все такое изучаешь?

 

[Nastasik]

Да неее, не вылетела, еще до вторника целый сегодняшний вечер =) Давай я помогу набрать сразу процентов 50? =) Ты ведь html и все такое изучаешь?

Ага, пытаюсь
Но, чем дальше в лес, тем больше дров

 

[Василий К.]

Отчет
Урок 25 - Продолжаю изучать простое прошедшее время. 70%

 

[Олух Царя Небесного]

Ага, пытаюсь
Но, чем дальше в лес, тем больше дров

Смотри, сейчас будем изучать HTML, то что нам наверняка понадобиться знать! =)

Спойлер: HTML

Web страницу можно сравнить с человеком у котрого есть голова, которая думает, и тело (руки) которые делают, выглядит это так:

<страница>
   <голова>
      содержит всякие разные мысли
   </голова>

   <тело>
      наряжается во всякие красивые шмотки
   </тело>
<страница>

Чтобы чем-то занять голову и во что-то принарядить веб страницу, используют в основном списки, таблицы и ссылки.


Списки бывают с точечками (маркированые)...

<ul>
   <li>Купить хлеб</li>
   <li>Купить молоко</li>
   <li>Купить колбасу</li>
</ul>

...и с цыферками (нумерованые)

<ol>
   <li>Купить хлеб</li>
   <li>Купить молоко</li>
   <li>Купить колбасу</li>
</ol>

Единственное самое полезное назначение списков - создание меню. Да-да, именно списком предствалено меню подавляющего большинства web-сайтов


Дальше по практической полезности у нас идет таблицы. Выглядят так:

<table>
   <tr>
      <td>Таблица из одно столбца</td>
      <td>С тремя ячеками</td>
      <td>Это третяя ячейка таблицы</td>
   </tr>
</table>

На основе таблиц в далеком прошлом строили каркасы для всех web-сайтов, теперь используют другие методы, но тем не менее таблицы все равно остаются актуальны по своему прямому назначению =)


Ссылки это вся суть интернета, нет ссылок - нет интернета. Ссылки могут быть на что угодно - на другие страницы, на изображения, на музыку, на видео и т.д. Выглядят так и вставляются туда, где их нужно отобразить на web-сайте:

<a href="http://главная страница на моем сайте.ру">
   Кликни сюда чтобы посмотреть мой сайт
</a>

Таким образом, чтобы создать элементарное меню нужно в теле страницы создать список в пункты которого нужно вписать ссылки на другие страницы сайта, и вообще на что угодно.


Есть еще некоторые теги, которые могут пригодиться:

<p>
это тег отделяет абзацы в тексте, чтобы он был красивый,
а не болтался на странице простыней


<h1>Самый гигантский заголовок</h1> ... <h6>Самый маленький заголовок</h6>


<hr>
просто линия горизонтальная


<img>
тег для отображения картинок, работает по принципу ссылок:
тут будет картинка = где моя картинка

Существует еще куча всяких тегов, но достаточно понять все что написано выше, в остальные можно подсматривать по мере необходимости а заучивать и запомнить не обязательно. Так же все теги имеют какие-то свойства, которые применяются к тому, что собственно эти теги отображают =)

...т.е. картинку можно сделать больше/меньше, текст черный/белый, список горизонтальный/вертикальный и т.п. Но как-то однажды собралась куча умных людей и решили, что прописывать все эти свойства в тегах нууу... не оч! И придумали CSS =)

...т.е. дополнение (отдельный файл) к страницам сайта, в которых расписано как и что украшать. Ссылка на этот файл стилей (css это стили, по умному выражаясь), записывается в голове сайта, туда же записываются и ссылки на java-скрипты и на все что подразумевается в работе страницы но написано не на ней а в отдельных файлах. Выглядит так:

<html>
   <head>
      <link rel="stylesheet" href="файл с украшательствами.css">
      <title>Название сайта<title>
      <meta>Ключевые слова и т.п. тех. информация<meta>
   </head>

   <body>

   </body>
</html>

Ну и вот как видно, для головы, хорошо бы не забывать о тегах <title> и <meta> =)


Три основных правила при создании html страницы:

1. Каждый открывающий тег, должен иметь закрывающую пару

2. Всегда нужно стараться делать код с отступами по вложенности, чтобы его можно было понять завтра =)

3. ...забыл


Ну и собственно все, можно считать что изучение HTML на этом за конченым, ибо "в ручную" сейчас никто не создает сайты, это все делается на движках (о которых я писал в последнем отчете), но для понимания работы c ними (движками) нужны познания HTML и CSS, поэтому первые сайты лучше создавать в простом блокноте.

Попробуй вставить последний код в блокнот, между тегами тела поместить например список или таблицу, и назови его index.html (расширение менять обязательно, иначе файл будет .txt и страница не откроется в браузере)

Nastasik, если дочитала до конца, можешь смело себе ставить 50% =) Следующая стена текста будет про CSS =)

 

[Олух Царя Небесного]

Jenidalini, поставь Насте 50% она все выучила =) Сейчас я еще на следующую неделю 50% насочиняю =)

 

[ogurez]

Отчет.
По тексту учу, с аудироваением недостаточно. Так что ставлю 80%.

 

[Олух Царя Небесного]

Котэ столько ошибок наделал в предыдущем посте - ужос! Просто кочмаррр! Но я торопился =)

Теперь будем говорить про CSS =)

Спойлер: CSS

Так вот... теперь мы знаем, что web-страницы состоят из тегов, при помощи которых на этих web-страницах отображаются разные вкусняшки: списки, таблицы, ссылки. Все эти (и вообще) теги имеют наборы разных параметров, при помощи которых можно изменить их (тегов) содержимое =) Логично! =) Но если лепить это все друг на друга, то так недолго и запутаться! Поэтому изобрели колесо решено было изменяемые параметры вынести в отдельный файл и назвать это CSS =)

Вообще признак хорошего разработчика - компактный и визуально понятный (с отступами) код, а не кол-во заученых им определений и свойств =)

Итого, если мы сочиняем нашу первую web-страницу с таблицами стилей, то у нес будет два файла: web-страничка - index.html, в "голове" который мы напишем ссылку на файл со стилями - style.css =)

Для редактирования и того и другого, на первых порах подойдет обычный блокнот. Главное чтобы расширения у файлов были не .txt, а .html и .css соответственно!

Покажу сразу на примере, у нас есть страница вида:

Как видно, файл со стилями пока девственно чист, но указан в файле .html. Теперь, чтобы... ну например заголовок "Привет мир!" сделать красным, мы и напишем в файле стилей:

весь текст в тегах <h1> сделать красным =)

...или точнее:

h1 {color: red;}

Самое главное! Чтобы увидеть, что же мы наделали, нужно сохранить то что мы наизменяли, обновить страницу в браузере и только тогда результат будет очевиден =)

И еще очень важно помнить! Если не отображаются изменения и сайт вообще сам по себе слегка "косоват", местами или повсеместно, то стоит искать не закрытые или недостающие теги в файле .html! Ну можно да не углядеть за всем, с каждым бывает =)


Ну чтоб нам еще сделать? Сделаем побольше отступ между нашими покупками и уберем точечки:

li {padding-bottom: 20px; list-style-type: none;}

Еще один важный момент который стоит крепко-накрепко запомнить! Параметры и присваиваемые им значения для одного и того же элемента, указываемые в фигурных скобках, друг от друга должны отделяться/заканчиваться точкой с запятой! Иначе ничего не будет работать =)

Можно присваивать один и тот же параметр нескольким элементам, чтобы место сэкономить, потому-что если элементов очень много, то кол-во параметров этих элементов увеличивается в геометрической прогрессии. Это можно просто запомнить на будущее =)

Комментарии, чтобы не запутаться в своей же писанине и "культура письма" еще скажу и покажу. Это важно, потому-что экономит время на поисках:"...а где-то это уже было написано?!"

С принципом технологии CSS мы чуть разобрались, поздравляю Настя! =) Существующие параметры перечислять бессмысленно, для это есть справочник, пользоваться которым не зазорно абсолютно. Пытаться сразу все понять и запомнить - нереально и не нужно! =) Скажу только пару слов о наиболее часто используемых параметрах:

color - меняет цвет

font - задает параметры шрифта

margin и padding - создают отступы, записываться могут по разному и между собой имеют отличия, рассажу может быть чуть позже, или сама изучишь этот вопрос =)

width и height - задают ширину и высоту, это относиться к таблицам и к блокам

background - задает цвет фона или фоновое изображение

float - выравнивает элементы по определенной стороне

display - определяет как элементы будут отображаться

...и так далее =) Пользуйся справочником, я например использую htmlbook, мне нравиться


На этом можно считать тему CSS пройденной, остальное будет зависеть только от практики =) А все время зависать на одной только теории - бесполезная трата времени =)

Все, до следующих встреч, Котэ пошел баинькать =) Всем споки-ноки =)

 

[Олух Царя Небесного]

Уровень прогресса к последнему тестовому отчету, будет 35% - ничего я не нарисовал больше, и даже на дуолинго снова продинамил "ударный режим" =)

...вот люди собираются с духом, убеждают себя чтобы что-то начать с чистого листа, а тут забыл зайти на дуолинго денек-другой и оба-на - с чистого листа =)

 

[Лесная Катананхе]

На эту неделю ставлю цель зазубрит 500 слов.

Боже дай мне столько же целеустремленности

Еще смотрю любимый сериал в оригинале

и мозгов
Ты крут