HTML И VS CODE Для Веб-разработки
28.04.2023 11:40
Прежде чем начать кодировать html в "VS CODE", мы должны сначала создать папку и назвать ее x.html, здесь я принимаю x как имя файла, который мы объявляем, например, x может быть index, about и т. д. Например, если вы обозначили x как index, то создайте файл index.html.
Теперь перейдем к теме,
Базовая структура Html :-
В коде VS мы можем увидеть его основную структуру только на 1-ом шаге :-.
Просто нажмите на этот символ (!) и нажмите Enter, тогда мы получим базовую структуру Html.
Базовая структура, которая показана на рисунке выше :-.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="HTML , CSS" >
<title>Документ</title>
</head>
<body>
</body>
</html>
- <!DOCTYPE html> :- Этот тег в приведенном выше коде определяет тип документа, где строка enter представляет тип документа HTML.
- <html lang="en"> :- Эта строка представляет язык, который мы используем, где en - код для "english".
- <head> :- Элемент <head> является контейнером для метаданных (данных о данных) и располагается между тегом <html> и тегом <body>.
- <meta charset="UTF-8"> :- Используется для определения данных в символах и формате преобразования UCS.UTF-8 (UCS Transformation Format 8) - наиболее распространенная кодировка символов во Всемирной паутине. Каждый символ представлен от одного до четырех байтов. UTF-8 обратно совместим с ASCII и может представлять любой стандартный символ Unicode.
- <meta http-equiv="X-UA-Compatible" content="IE=edge"> :-.
В этой статье рассказывается о http-запросах и http-ответах. Проще говоря, это процесс просмотра веб-страниц.
6.<meta name="viewport" content="width=device-width, initial-scale=1.0"> :-...
Эта строка описывает фактический код, который выполняется для разработки фронт-энда веб-страницы, которую мы видим визуально.
7. Остальные теги, такие как <head> , <title> , <body> .
<head> :- это заголовок содержимого, которое мы создаем на веб-странице.
Заголовки веб-страниц, которые известны как теги head, могут быть максимум следующими
8. Кроме того, располагайте заголовки в порядке, связанном с вашим сайтом, чтобы ваш сайт выглядел эффективно.
<title> :- Это описание названия контента, который вы пишете, а также помощь браузеру в просмотре данных.
<body> :- Это тег, в котором мы пишем многие связанные вещи, такие как изображения, ссылки, гиперссылки и т.д.
Теперь давайте обсудим основной код, связанный с html и использование некоторых тегов :-
Исходный код :- <!DOCTYPE html>
<html>
<head>
<title> Prasanna</title>
<style>
Img {
Ширина: 100px;
Border-radius: 50px;
Float: left;
Margin-right: 10px;
}
.username {
Font-weight: bold;
}
</style>
</head>
<body>
<img src="me.jpg" />
<p class="username">@prasannathupati</p>
<p>это веб-сессия</p>
</body>
</html>
Вы должны изменить src изображения, так как ваш путь будет другим.
- Поскольку мы уже создали папку и обсудили базовую структуру. Теперь отмените базовую структуру, используя "Ctrl +Z" или выделите всю структуру и нажмите delete.
- Самое замечательное в коде Vs - это встроенные функции.
- Сначала я пишу <!DOCTYPE html> и затем <html> теги и начинаю делать код, как указано выше.
- мы использовали тег изображения "img" и вставили изображение и привели исходный код, тут у новичков возникает сомнение, как вставить изображение в наш код. Итак, это простой процесс, просто вставьте изображение в папку, которую вы создали в приложении vs code, а затем просто скопируйте и вставьте наш путь к изображению в 'src =', который известен как источник изображения в html.
- Мы также можем найти тег alter в самом теге image как встроенную функцию, это не обязательно, что мы должны использовать эту функцию, но это будет полезно для браузера, чтобы предложить ваше изображение первым, где мы в теге alter пишем об изображении. Например, если мы берем кофе в качестве изображения, упомяните кофе в теге alter.
- Это не так, что вы дали изображение и оно будет отображаться идеально, для модификаций мы должны использовать CSS, о чем мы подробно расскажем в следующих концепциях.
- А пока давайте поговорим о теге <style>, который используется для изменения изображения.
- Сначала откройте тег <style> и после img { } напишите между ними, а затем укажите ширину и высоту изображения. Эти же слова используются в html, для них нет специальных и измененных названий.
- И если вы хотите круг, вы должны указать border - radius или просто border и указать, хотите ли вы правую или левую сторону или в середине страницы, мы используем тег float.
- А если вы хотите, чтобы был написан абзац, просто укажите между тегами <p> и </p> .
- Если вы хотите, чтобы ваш front-style был blod, используйте тег :-.
- например, <p> <b> Это блог </b> </p>.
- вывод для приведенного выше кода можно увидеть мгновенно, просто переместите стрелку куда-нибудь на экране, где код не присутствует, откроется вкладка, и вы найдете ее как "открыть живой сервер и просто нажмите на нее. вы можете увидеть страницу вывода в нашем chrome.
ВЫХОД :-
Давайте обсудим еще несколько тегов :-
Исходный код :-
lorem :- <p> lorem 20 </p> это тег, используемый для генерации случайного текста в абзаце, а число, которое вы указываете, это количество слов, которое вы хотите.
<a href> и </a> используются для создания гиперссылок и добавления ссылок.
Создание таблиц :-
<table> этот тег используется для создания таблицы.
<tr> используется для создания строк в таблице.
<th> определяет ячейку заголовка в таблице.
<table bgcolor="black" width="700" >
<tr bgcolor="grey">
<th width="100">Воскресенье</th>
<th width="100">Понедельник</th>
<th width="100">вторник</th>
<th width="100">wednesday</th>
<th width="100">Thrusday</th>
<th width="100">Firday</th>
<th width="100">Суббота</th>
</tr>
<tr bgcolor="lightgrey" align="center">
<td>закрыто</td>
<td>9-5</td>
<td>9-5</td>
<td>9-5</td>
<td>9-5</td>
<td>9-5</td>
<td>закрыто</td>
</tr>
</table>
Выход :-
Span и Div :-
Div :-
Он <div> или элемент деления - это общий элемент HTML, используемый для разделения содержимого веб-страницы на блоки. При этом блочный элемент страниц начинается с новой строки и имеет такую же ширину, как вся страница или родительский контейнер. Тег <div> часто используется для классификации абзацев, заголовков, изображений и ссылок. Он применим для создания HTML-макетов на основе CSS.
Пример:
<div id="абзацы">
<p> содержание первого абзаца</p>
<p> содержание второго абзаца</p>
</div>
Span :-
Общий элемент <span> inline используется для стилизации текста. Он применяет стилизацию к разделу инлайн-содержимого. Элемент inline не использует новую строку и занимает столько же места, сколько и текст. Эти теги применимы для небольших сегментов текста, изображений, ссылок и других элементов HTML, которые могут отображаться в строке с окружающим содержимым.
Пример для тега <span>:
<p> она имеет <span id="special- text"> дополнительное содержание</span> внутри него. </p>.
Исходный код :-
<!DOCTYPE html>
<html>
<head>
<title>Моя HTML страница</title>
</head>
<body>
<div>
<h1>Hello World!</h1>
<p>Это моя первая HTML-страница.</p>
</div>
<div>
<p>Вот абзац с <span style="color: red;">красным</span> словом.</p>
</div>
<div>
<p>Вот еще один абзац с <span style="font-weight: bold;">жирным</span> словом.</p>
</div>
</body>
</html>
Списки :-
Неупорядоченный список -<ul>
Упорядоченный список -<ol>
Список описаний -<dl>
Исходный код :-
<!DOCTYPE html>
<html>
<head>
<title>Моя HTML страница</title>
</head>
<body>
<h2>Неупорядоченный список</h2>
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
</ul>
<h2>Упорядоченный список</h2>
<ol>
<li>Первый пункт</li>
<li>Второй пункт</li>
<li>Третий пункт</li>
</ol>
</body>
</html>
Iframes :-
<iframe> (сокращение от inline frame) - это тег HTML, используемый для встраивания другого HTML-документа или веб-страницы в текущий HTML-документ. Это позволяет включить на веб-страницу внешнее содержимое, например, видео, карту или виджет социальной сети, без необходимости размещать это содержимое самостоятельно.
Тег <iframe> создает на веб-странице прямоугольную область, содержащую встроенное содержимое. Источник содержимого указывается с помощью атрибута src, который указывает на URL внешней веб-страницы или документа, который будет внедрен. Атрибуты width и height могут быть использованы для задания размеров iframe.
Выход:-
При нажатии на видео вы перейдете на платформу youtube и воспроизведете видео.
Подробное объяснение по созданию кнопок и форм будет написано в следующем блоге в течение 2 дней.
Для ссылки на понятное объяснение основных тегов :-.
Стоит ли изучать PHP в 2023-2024 годах?
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
Концепция локализации и ее применение в приложениях React ⚡️
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
Пользовательский скаляр GraphQL
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.