Scribd Logo
Upload

Welcome to Scribd!

  • 9 views

    Ders II (2,3,4)

    Uploaded by

    Sultan Ahmad
    The document discusses various HTML elements including headings, lists, anchors, images, and comments. It provides descriptions and examples of each element from the MDN Web Docs site. It also includes two exercises with sample HTML code using some of these elements.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Ders II (2,3,4)

    Uploaded by

    Sultan Ahmad
    9 views6 pages
    The document discusses various HTML elements including headings, lists, anchors, images, and comments. It provides descriptions and examples of each element from the MDN Web Docs site. It also includes two exercises with sample HTML code using some of these elements.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses various HTML elements including headings, lists, anchors, images, and comments. It provides descriptions and examples of each element from the MDN Web Docs site. It also includes two exercises with sample HTML code using some of these elements.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    9 views6 pages

    Ders II (2,3,4)

    Uploaded by

    Sultan Ahmad
    The document discusses various HTML elements including headings, lists, anchors, images, and comments. It provides descriptions and examples of each element from the MDN Web Docs site. It also includes two exercises with sample HTML code using some of these elements.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 6

    ⚗

    Ders II (2,3,4)
    Created @December 2, 2021 7:23 PM

    Tags

    Kaynak : MDN Web Docs

    Heading
    <h1> ila <h6> HTML öğeleri, altı bölüm başlığı düzeyini temsil eder. <h1> en yüksek bölüm düzeyidir ve <h6> en düşük
    bölümdür.

    - : The HTML Section Heading elements - HTML: HyperText Markup Language | MDN
    The to HTML elements represent six levels of section headings. is the highest section level and is the
    lowest. These elements only include the global attributes. Note: The align attribute is obsolete; don't use it.
    Heading information can be used by user agents to construct a table of contents for a document
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

    <h1>Beetles</h1>
    <h2>External morphology</h2>
    <h3>Head</h3>
    <h4>Mouthparts</h4>
    <h3>Thorax</h3>
    <h4>Prothorax</h4>
    <h4>Pterothorax</h4>

    Exercise 1

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Issanin Sayfasi</title>
    </head>
    <body>
    <h1>Pangolin</h1>

    <h2>Intro</h2>

    Ders II (2,3,4) 1
    <p>
    Pangolins, sometimes known as scaly anteaters, are mammals of the order
    Pholidota (from Ancient Greek φολῐ́ς, "horny scale"). The one extant
    family, Manidae, has three genera: Manis, Phataginus and Smutsia. Manis
    comprises the four species found in Asia, while Phataginus and Smutsia
    include two species each, all found in Sub-Saharan Africa. These species
    range in size from 30 to 100 cm (12 to 39 in). A number of extinct
    pangolin species are also known.
    </p>

    <h2>Description</h2>

    <p>
    Pangolins have large, protective keratin scales covering their skin; they
    are the only known mammals with this feature. They live in hollow trees or
    burrows, depending on the species. Pangolins are nocturnal, and their diet
    consists of mainly ants and termites, which they capture using their long
    tongues. They tend to be solitary animals, meeting only to mate and
    produce a litter of one to three offspring, which they raise for about two
    years.
    </p>

    <h2>Poaching</h2>

    <p>
    Pangolins are threatened by poaching (for their meat and scales, which are
    used in Chinese traditional medicine) and heavy deforestation of their
    natural habitats, and are the most trafficked mammals in the world.As of
    January 2020, of the eight species of pangolin, three (Manis culionensis,
    M. pentadactyla and M. javanica) are listed as critically endangered,
    three (Phataginus tricuspis, Manis crassicaudata and Smutsia gigantea) are
    listed as endangered and two (Phataginus tetradactyla and Smutsia
    temminckii) are listed as vulnerable on the Red List of Threatened Species
    of the International Union for Conservation of Nature.
    </p>
    </body>
    </html>

    HTML Boilerplate
    HTML'deki boilerplate, projenizin başlangıcında ekleyeceğiniz bir şablondur.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <script src="index.js"></script>
    </body>
    </html>

    Basic HTML5 Template: Use This HTML Boilerplate as a Starter for Any Web Dev Project
    When you are building a new website, it is important to have a good starting foundation. In this article, I will
    explain what an HTML 5 boilerplate is and how to create a basic template to use in your projects. What is an
    HTML 5 boilerplate?According to Wikipedia, boilerplate
    https://www.freecodecamp.org/news/basic-html5-template-boilerplate-code-example/

    Lists
    <ol> HTML öğesi, sıralı bir öğe listesini temsil eder - tipik olarak numaralı bir liste olarak işlenir.

    <ol>
    <li>Mix flour, baking powder, sugar, and salt.</li>
    <li>In another bowl, mix eggs, milk, and oil.</li>
    <li>Stir both mixtures together.</li>
    <li>Fill muffin tray 3/4 full.</li>
    <li>Bake for 20 minutes.</li>
    </ol>

    Ders II (2,3,4) 2
    : The Ordered List element - HTML: HyperText Markup Language | MDN
    The HTML element represents an ordered list of items - typically rendered as a numbered list. This element
    also accepts the global attributes. This Boolean attribute specifies that the list's items are in reverse order.
    Items will be numbered from high to low.
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol

    <ul> HTML öğesi, genellikle madde işaretli liste olarak işlenen, sırasız bir öğe listesini temsil eder.

    <ul>
    <li>Milk</li>
    <li>Cheese
    <ul>
    <li>Blue cheese</li>
    <li>Feta</li>
    </ul>
    </li>
    </ul>

    : The Unordered List element - HTML: HyperText Markup Language | MDN


    The HTML element represents an unordered list of items, typically rendered as a bulleted list. This element
    includes the global attributes. This Boolean attribute hints that the list should be rendered in a compact
    style. The interpretation of this attribute depends on the user agent, and it doesn't work in all browsers.
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul

    Exercise 2

    <!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" />
    <title>Document</title>
    </head>
    <body>
    <h1>Movies</h1>
    <h2>My Top 3 Movies:</h2>

    <ol>
    <li>Amadeus</li>
    <ul>
    <li>icindeki</li>
    </ul>
    <li>Stand By Me</li>
    <li>Amelie</li>
    </ol>

    <h2>Other Good Movies:</h2>

    <ul>
    <li>Alien</li>

    <li>Parasite</li>
    <li>Annie Hall</li>
    </ul>

    Ders II (2,3,4) 3
    </body>
    </html>

    Anchor Element
    <a> HTML öğesi (veya bağlantı öğesi), href özniteliğiyle birlikte web sayfalarına, dosyalara, e-posta adreslerine, aynı sayfadaki

    konumlara veya bir URL'nin adresleyebileceği herhangi bir şeye bir köprü oluşturur.

    Her <a> içindeki içerik, bağlantının hedefini belirtmelidir. href özelliği mevcutsa, <a> öğesine odaklanılırken enter tuşuna
    basılması onu etkinleştirir.

    <p>You can reach Michael at:</p>

    <ul>
    <li><a href="https://example.com">Website</a></li>
    <li><a href="mailto:m.bluth@example.com">Email</a></li>
    <li><a href="tel:+123456789">Phone</a></li>
    </ul>

    : The Anchor element - HTML: HyperText Markup Language | MDN


    The HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email
    addresses, locations in the same page, or anything else a URL can address. Content within each should
    indicate the link's destination. If the href attribute is present, pressing the enter key while focused on the
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

    Adding Images
    <img> HTML öğesi, belgeye bir resim gömer.

    <img class="fit-picture"
    src="/media/cc0-images/grapefruit-slice-332-332.jpg"
    alt="Grapefruit slice atop a pile of other slices">

    : The Image Embed element - HTML: HyperText Markup Language | MDN


    The HTML element embeds an image into the document. The above example shows usage of the element:
    The src attribute is required, and contains the path to the image you want to embed.

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

    Comments
    Yorum arayüzü, işaretleme içindeki metinsel gösterimleri temsil eder; genellikle görsel olarak gösterilmese de bu tür yorumlar
    kaynak görünümünde okunmak üzere mevcuttur.
    Yorumlar, HTML ve XML'de <!-- ve --> arasında içerik olarak temsil edilir. XML'de, SVG veya MathML işaretlemesinde
    olduğu gibi, bir yorumda ' -- ' karakter dizisi kullanılamaz.

    Comment - Web APIs | MDN


    The Comment interface represents textual notations within markup; although it is generally not visually
    shown, such comments are available to be read in the source view. Comments are represented in HTML
    and XML as content between ' '. In XML, like inside SVG or MathML markup, the character sequence '--'
    https://developer.mozilla.org/en-US/docs/Web/API/Comment

    HTML5 - MDN Web Docs Glossary: Definitions of Web-related terms | MDN


    The term HTML5 is essentially a buzzword that refers to a set of modern web technologies. This includes
    the HTML Living Standard, along with JavaScript APIs to enhance storage, multimedia, and hardware
    access. You may sometimes hear about "new HTML5 elements", or find HTML5 described as a new version
    https://developer.mozilla.org/en-US/docs/Glossary/HTML5

    <div> and <span>

    Ders II (2,3,4) 4
    <div> HTML öğesi, akış içeriği için genel kapsayıcıdır. CSS kullanılarak bir şekilde stillendirilinceye kadar içerik veya düzen

    üzerinde hiçbir etkisi yoktur.

    <div class="warning">
    <img src="/media/examples/leopard.jpg"
    alt="An intimidating leopard.">
    <p>Beware of the leopard</p>
    </div>

    : The Content Division element - HTML: HyperText Markup Language | MDN


    The HTML element is the generic container for flow content. It has no effect on the content or layout until
    styled in some way using CSS (e.g. styling is directly applied to it, or some kind of layout model like Flexbox
    is applied to its parent element).
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div

    <span> HTML öğesi, doğal olarak hiçbir şeyi temsil etmeyen, içeriği ifade etmek için genel bir satır içi kapsayıcıdır. Öğeleri stil

    amaçlarıyla (sınıf veya kimlik özniteliklerini kullanarak) veya lang gibi öznitelik değerlerini paylaştıklarından gruplamak için
    kullanılabilir. Yalnızca başka hiçbir anlamsal öğe uygun olmadığında kullanılmalıdır. <span> , bir <div> öğesine çok benzer,
    ancak <div> blok düzeyinde bir öğedir, <span> ise satır içi bir öğedir.

    <p>Add the <span class="ingredient">basil</span>, <span class="ingredient">pine nuts</span> and <span class="ingredient">garlic</span>

    <p>Gradually add the <span class="ingredient">olive oil</span> while running the blender slowly.</p>

    : The Content Span element - HTML: HyperText Markup Language | MDN


    The HTML element is a generic inline container for phrasing content, which does not inherently represent
    anything. It can be used to group elements for styling purposes (using the class or id attributes), or because
    they share attribute values, such as lang. It should be used only when no other semantic element is
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span

    HR, BR, Sup and Sub


    <hr> HTML öğesi, paragraf düzeyindeki öğeler arasındaki tematik bir kesintiyi temsil eder: örneğin, bir hikayedeki bir sahne

    değişikliği veya bir bölüm içindeki bir konu değişikliği.

    <p>§1: The first rule of Fight Club is: You do not talk about Fight Club.</p>
    <hr>
    <p>§2: The second rule of Fight Club is: Always bring cupcakes.</p>

    : The Thematic Break (Horizontal Rule) element - HTML: HyperText Markup Language | MDN
    The HTML element represents a thematic break between paragraph-level elements: for example, a change
    of scene in a story, or a shift of topic within a section. Historically, this has been presented as a horizontal
    rule or line.
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr

    <br> HTML öğesi, metinde bir satır sonu oluşturur (satır başı). Bir şiir veya bir adres yazmak için, dizelerin bölünmesinin

    önemli olduğu durumlarda kullanışlıdır.

    <p>
    “Otuz Beş Yaş” şiiriyle bitiriyoruz;<br />

    Yaş otuz beş! yolun yarısı eder.<br />

    Dante gibi ortasındayız ömrün.<br />

    Delikanlı çağımızdaki cevher,<br />

    Yalvarmak, yakarmak nafile bugün,<br />

    Ders II (2,3,4) 5
    Gözünün yaşına &copy bakmadan gider.
    </p>

    : The Line Break element - HTML: HyperText Markup Language | MDN


    The HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an
    address, where the division of lines is significant. As you can see from the above example, a element is
    included at each point where we want the text to break.
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br

    <sup> HTML öğesi, yalnızca tipografik nedenlerle üst simge olarak görüntülenecek satır içi metni belirtir. Üst simgeler genellikle

    daha küçük metin kullanılarak yükseltilmiş bir taban çizgisiyle oluşturulur.

    <p>The <b>Pythagorean theorem</b> is often expressed as the following equation:</p>

    <p><var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> = <var>c<sup>2</sup></var></p>

    : The Superscript element - HTML: HyperText Markup Language | MDN


    The HTML element specifies inline text which is to be displayed as superscript for solely typographical
    reasons. Superscripts are usually rendered with a raised baseline using smaller text. The element should
    only be used for typographical reasons-that is, to change the position of the text to comply with
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup

    <sub> HTML öğesi, yalnızca tipografik nedenlerle alt simge olarak görüntülenmesi gereken satır içi metni belirtir. Subscript'ler

    tipik olarak daha küçük metin kullanılarak alçaltılmış bir taban çizgisiyle oluşturulur.

    <p>Almost every developer's favorite molecule is


    C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>, also known as "caffeine."</p>

    : The Subscript element - HTML: HyperText Markup Language | MDN


    The HTML element specifies inline text which should be displayed as subscript for solely typographical
    reasons. Subscripts are typically rendered with a lowered baseline using smaller text. The element should
    be used only for typographical reasons-that is, to change the position of the text to comply with
    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub

    HTML Karakter Entity

    Character Entity Reference Chart


    CYRILLIC CAPITAL LETTER BYELORUSSIAN-UKRAINIAN I
    https://dev.w3.org/html5/html-author/charref

    Ders II (2,3,4) 6

    You might also like