Kod do pliku html:
<!DOCTYPE html> <html> <head> <title>Al-Sughari</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- Alexander Al-Sughari 1P 05.02.2021 --> <link href="../css/alsu_z18.css" rel="stylesheet" type="text/CSS"> </head> <body> <div id="Blok1"> <span id="span1"> Znacznik DIV (blok 1)--> Al-Sughari </span> <br> <span id="span2"> <b><u>Element blokowy (DIV)</u></b> jest elementem <br> blokowym może zawierać wewnątrz siebie <br> zwykły tekst, jak również inne elementy blokowe. <br> Został on pomyślany do tworzenia <br> obszerniejszych struktur. </span> <br> Zastosowanie DIV <ul id="wyliczenie1"> <li> Z div'a powinno się korzystać kiedy potrzebujemy wyodrębnić poszczególne <br> bloki w układzie dokumentu, na przykład lewa kolumna, <br> menu nawigacyjne, stopka. </li> <li> Służy do utworzenia sekcji (bloku) w pliku HTML w celu ich sformatowania <br> za pomocą arkusza stylów CSS. </li> </ul> </div> <div id="Blok3"> <span id="span4"> Różnica między znacznikami DIV i SPAN (blok 3)--> 1P </span> <ul id="wyliczenie3"> <li> <b><u>Span'em wyodrebniamy elementy liniowe</u></b> (najczęściej fragmenty tekstu) a <br> <b><u>divem blokowe</u></b> elementy, większe fragmenty struktury składające się na układ strony. </li> <li> Dodatkowo DIV domyślnie jest wyświetlany w bloku. Natomiast SPAN w linii. </li> </ul> </div> <div id="Blok2"> <span id="span3"> Znacznik SPAN (blok 2)--> 08:20 05.02.2021 </span> <ul id="wyliczenie2"> <li> <b><u>Elementy wyświetlanew linii (SPAN)</u></b> jest elementem liniowym nie mogą zawierać elementów blokowych, ale mogą inne elementy wyświetlane w linii oraz zwykły tekst. </li> <li> Jeśli chcemy w paragrafie część tekstu wyróżnić czerwonym kolorem, do wyodrębnienia tego tekstu nie możemy użyć elementu div (paragraf z zasady nie może zawierać elementów blokowych) tylko span. Wewnątrz DIV można oczywiście wpisać również SPAN. </li> </ul> </div> </body> </html>
Kod do pliku css:
/* Alexander Al-Sughari 1P 05.12.2020 */ body{ background-color: green; } /* Pierwszy blok*/ div#Blok1{ width: 1181px; background-color: fuchsia; } span#span1{ color: blue; font-size: 1.7cm; } ul#wyliczenie1{ color: gray; font-size: 8mm; list-style-type: disc; font-family: Georgia; } span#span2{ font-size: 1.3cm; } /* Drugi blok*/ div#Blok2{ width: 981px; background-color: red; } span#span3{ color: teal; font-size: 1.4cm; } ul#wyliczenie2{ color: green; font-size: 9mm; list-style-type: circle; font-family: fantasy; } /*Trzeci blok*/ div#Blok3{ width: 1181px; background-color: yellow; } span#span4{ color: maroon; font-size: 11mm; } ul#wyliczenie3{ color: blue; font-size: 7mm; list-style-type: square; font-family: Courier New; }
Darmowy hosting
zapewnia PRV.PL