Многие смотря на свой старый компьютер не вольно задумываются об его апгрейде или вообще о его замене.В условиях пандемии это стало ещё более желанно, но как правило деньги являются главным барьером. В школьном возрасте как мне кажется это более критичная проблема, чем у взрослого человека. Но и она решается фрилансом.
Любой человек хоть раз слышал о WEB-программировании. Сегодня я хочу разобрать это более подробно. Итак в своей основе WEB-программировании стоит на языке программирования HTML.Сегодня я познакомлю с азами этого языка .
Для начала создадим отдельную папку. В ней создаём текстовый документ с расширением .html далее нам нужно установить рабочую среду(я буду использовать Notepad++, так же можно использовать Sublime Text ). Заходим в программу и открываем наш файл.Файл-открыть-ваша папка-документ.
Теперь напишем ,что нибудь. Например:"Привет мир!". Теперь сохраняем(можно горячими клавишами Ctrl+s). Теперь в папке дважды нажимаем на наш текстовый документ и у нас открывается вкладка в браузере вот так вот она выглядит
Дальше я буду рассматривать страничку в вики как пример.
Сразу же справа мы видим пока не понятные строчки это теги. Теги есть одиночные и парные. (<тег></тег>)-парный (<тег />)-одиночный.Также есть такое понятие как атрибут. Сейчас объясню что это такое. Создадим свой воображаемый тег например жёсткий диск(жд) . Запишем <жд> </жд> так вот между двумя частями тега хранится информация(контент), а атрибутами будут значения имеющие какую либо связь к нашему тегу сейчас запишу <жд объём="1000гб"></жд>-тег с атрибутом объём.Атрибутов можно записать много.
Итак первый тег который я рассмотрю это <a></a>. <a></a> это парный тег. этот тег отвечает за ссылки. Смотрите , я хочу, что бы при нажатии на слово мир я переходил на страничку гугла.
Мы сохраняем и обновляем вкладку в браузере... И нечего не происходит из-за того что мы не вставили ссылку на гугл. Для того что бы вставить ссылку нам нужен атрибут href.
привет <a href="https://www.google.ru/">мир<a/>!-так должна выглядеть наша команда.Снова сохраняем и обновляем.(сохранять надо каждый раз так что далее я писать об этом не буду)так вот выглядит наша страничка
Теперь отвлечемся от нашей странички и полазим по сайтам и их кодам
Строение любого сайта таково
<!DOCTIPE html>
<html>
<head></head>
<body></body>
</html>
сейчас объясню что всё это значит
<!DOCTIPE html> отвечает за то что бы браузер понял что мы пишем на html
<html> </html> объединяет наш код в одно целое
<head></head> содержит мета-информацию
<body></body> содержит основную информацию сайта
по сути без этого код работать не должен. Но так как html не очень строгий язык программирования он нам прощает это, но лучше сразу привыкать писать правильно. Так как на том же фрилансе могут просто не принять работу без этого.Сейчас надо подредактировать код.
Отлично теперь всё правильно и красиво. Теперь хочу заметить что наша вкладка в браузере называется именем документа.Это можно исправить с помощью раздела <head> и тега title
<head>
<title>название во вкладке</title>
</head>
вот таким образом можно назвать наш сайт. я сделаю например так
Вот так получилось
Отлично, теперь начнём изучать основные теги всего сейчас я покажу ещё несколько тегов
1. Жирный текст <strong></strong>
2.перевод строки <br/>
3.заголовок <h1/> (самый большой)<h2/>,<h3/>,<h4/>,<h5/>,<h6/>(самый маленький)
4.картинки можно вставлять двумя способами: относительным и абсолютным.<img scr="ссылка с браузера"></img> 2.мы скачиваем картинку, вставляем в папку с текстовым документом(расширение картинки должны быть .img).Но я советую создать в парке папку и скидывать туда все картинки.И теперь <img scr="название папки/название картинки "></img> также можно изменять размер. например я хочу фотографию тигра 100 на 100 пикселей я пишу
Следующий тег <div></div> он группирует контент.Ниже приведу пример блоков
Сейчас не заметна разница,и больше это имеет смысл для удобства и сортировки кода
Следующий тег <table border="5"> <tr> (<td>вписываем значение</td> )-копируем сколько надо раз) </tr> </table>
ввод текста (например строка для отзывов)
<input Value-"стандартный текст (например для редактирования)"</input><br/>
тоже самое что и прошлое но больше <textarea></textarea> тоже самое что и прошлое но больше
Для начала этого как мне кажется полностью хватит следите за каналом, будет ещё много чего интересного.