• TECHNOLOGIE INTERNETOWE

Technologie Internetowe 2

HTML & CSS

Layout

Glowne skladowe elementy layoutu:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <footer>

Cwiczenia

Tworzymy prosta strone (np. film) z poprawnym layoutem. Wysłać do 29.10.2021 na wirtualny serwer.

img

<header>
  <h2></h2>
</header>

<section>
  <nav>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </nav>

  <article>
    <h3></h3>
    <p></p>
    <p></p>
    <p></p>
  </article>
</section>

<footer>
</footer>

HTML tags

<html>
    <head>
        <title>Title of your web page</title>
    </head>
    <body>HTML web page contents </body>
</html>
<head> Statements... </head>
<body> Statements... </body>
<title> Statements... </title>
<h1>Heading 1 </h1>
<h2>Heading 2 </h2>
<h3>Heading 3 </h3>
<h4>Heading 4 </h4>
<h5>Heading 5 </h5>
<h6>Heading 6 </h6>
<em> Statements... </em>
<strong> Statements... </strong>
<b> Statements... </b>
<i> Statements... </i>
<small> Statements... </small>
<u> Statements... </u>
<strike> Statements... </strike>
<a href="..."> Statements... </a>
<li>List item 1</li>
<li>List item 2</li>
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ol>
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
</ul>
<!-- Statements... -->
<center> Statements... </center>
<font face="Times New Roman">Statements...</font>
Statements...<br>A computer science portal
<img src="gfg.jpg" title="image-tag" width="40" height="40" border="0">
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<hr width="50%" size="3" />
<table border="4" cellpadding="2" cellspacing="2" width="100%">
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>
<form action="mailto:you@yourdomain.com ">
  Name: <input name="Name" value="" size="80"><br>
  Email: <input name="Email" value="" size="80"><br>
  <br><center><input type="submit"></center>
</form>
<form method=post action="/cgibin/example.cgi">
  <center> Select an option:<select>
  <option>option 1</option>
  <option selected>option 2</option>
  <option>option 3</option>
</form>

source source2

CSS

header {
  background-color: #555;
}

.class-name {
  background-color: #555;
}

#id-name {
  background-color: #555;
}
header {
  background-color: #555;
  background-color: #123121;
  background-color: red;
}
header {
  color: #000000;
  color: white;
}
header {
  padding: 30px;
  padding: 30px 30px;
  padding: 30px 30px 30px 30px;
  padding: top right bottom left;
  padding: top&bottom right&left;
  padding-left: 30px;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 40px;
}
header {
  margin: 30px;
  margin: 30px 30px;
  margin: 30px 30px 30px 30px;
  margin: top right bottom left;
  margin: top&bottom right&left;
  margin-left: 30px;
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 40px;
}
header {
  text-align: center;
}
header {
  font-size: 30px;
}
header {
  width: 10px;
  width: 10%;
  width: auto;
  height: 30px;
  height: 50%;
}
* {
  border: 1px solid red;
}
@media (max-width: 1000px) {
  nav, article {
    width: 100%;
    height: auto;
  }
}