Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • HTML Basics

    Загружено:

    George Jones
    34 просмотров4 страницы
    The document provides an overview of HTML basics, including: - The structure of an HTML document with <html>, <head>, and <body> tags - Common tags for headings, paragraphs, images, links, and lists - How to add tables, divs, spans, classes, and IDs - Using CSS to style elements by linking a CSS file or using inline styles - Positioning and layout of elements using the box model and properties like display, float, and position

    Исходное описание:

    Some basic coding and laws for using HTML

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    DOCX, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    The document provides an overview of HTML basics, including: - The structure of an HTML document with <html>, <head>, and <body> tags - Common tags for headings, paragraphs, images, links, and lists - How to add tables, divs, spans, classes, and IDs - Using CSS to style elements by linking a CSS file or using inline styles - Positioning and layout of elements using the box model and properties like display, float, and position

    Авторское право:

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    34 просмотров4 страницы

    HTML Basics

    Загружено:

    George Jones
    The document provides an overview of HTML basics, including: - The structure of an HTML document with <html>, <head>, and <body> tags - Common tags for headings, paragraphs, images, links, and lists - How to add tables, divs, spans, classes, and IDs - Using CSS to style elements by linking a CSS file or using inline styles - Positioning and layout of elements using the box model and properties like display, float, and position

    Авторское право:

    © All Rights Reserved
    Скачайте в формате DOCX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 4

    Page 1 of 4

    Document1
    HTML Basics

    Have to start each document with what type of code to use
    Line 1 is always <!DOCTYPE ...>
    Where the ... is the type of code being used
    In addition to this on the second and last line have to put in the command <html> and
    </html> to show the start and end of a document respectively
    1. <!DOCTYPE html>
    2. <html>
    3.
    4.
    5. </html
    This inside <> are called tags and are generally paired up
    The file is broken into 2 parts: The Head and the Body, both of these are detailed with tabs
    1. <!Doctype html>
    2. <html>
    3. <head>
    4. <title>
    5. </title>
    6. <head>
    7. <body>
    8. </body>
    9. <html>
    The head includes information about the webpage
    Have the title tag which gives the webpage its title that will appear in the tab
    The body contains what will appear on the webpage itself
    Denote Headings by <hi> and <hi> Where i=1,2,3,4,5,6 where lower the number the
    larger the font
    Denote paragraphs by <p> and </p>
    Insert images by url with <img src=url />
    Insert hyperlinks with <a href=url> around the chosen hyperlink and closing with
    </a>
    Ordered list <ol>, </ol> is a list ordered 1,2,3... and each element in the list is coded
    with <li> as the tags
    Unordered list <ul>,</ul> is an unordered list and each element is coded with <li> tag
    Can put lists inside list by just inserting new tags inside the active ones
    Can change the appearance of font with style command, use <p style=command>
    o The commands are:
    Font-size:Xpx
    Color:color desired
    Font-family:font desired
    Text-align:left/right/center
    o If you are unsure if a quality exists and want to put up substitute list the most
    desired quality and follow it with a comma and the then the back up quality
    Can change the background colour of different parts of the code with the style
    function using background-color: which will affect the part of the document
    between the tags
    Make a word bold with <strong>
    Make a word italicised with <em>
    Page 2 of 4
    Document1
    When writing the html code indent each pair of tags
    Tables
    Start and end a table with the <table>
    Define each table row with <tr></tr>
    Add columns in each row with <td></td>
    Can split tables up into head and body with <thead> and <tbody>
    Can add headings into <tr> with <th></th> as a heading command
    Can insert pictures and links into individual cells
    Table styling
    Can set the width of column elements with colspan=X inside the <tr> tag
    Can set border thickness with border=Xpx inside tags
    Can style border with border:Xpx (dashed/solid) colour can define different borders
    for each cell with border-(edge)
    Div
    Can split the body of the code into different sections using <div></div> this enables different
    styling for different parts of the body- can use style on this for dimension and colors etc
    These can be made into links wrappin with <a href=url>, </a>
    Span
    Allows for styling smaller parts of the document, everything enclosed by span is effected by
    the command
    Classes
    Allows for specifically cssing of a class of tags eg all the < p class=xxx>
    Allocate a tag a class with < class=id> which is related to the css by .id
    ID
    Allows for the styling of 1 exact element <div id=xxx> changes that 1 set of tags only
    Represented in css by #xxx
    CSS
    This is a way of styling the page without putting lots of code into the html doc and without
    having to apply the styling to each individual elemtn
    Need to link html doc to css doc use <link type="text/css" rel="stylesheet"
    href="stylesheet.css"/> where type is what type of link being used, rel is relative to which
    document and href sets up the link to that document and its format
    Pseudo class selectors
    Is a way of accessing HTML items that aren't part of the document tree.For instance, it's very
    easy to see where a link is in the tree. But where would you find information about whether a
    link had been clicked on or not? PCS allows to style these kinds of changes in our HTML
    document.
    Can change visuals for before clicking, after clicking and while hovering over:
    A:link- an unvisited link
    A:visited- a visited link
    A:hover while hover over the link with the mouse
    A:first-child affects only the first child not sibling elements aswell
    A:nth-child(n) as previous however it picks the nth child rather than the 1
    st

    Display
    This command allows you to dictate how different HTML elements are positioned relative to
    each other
    Block makes the element a block box takes up the whole width of the page so next
    element gets placed below
    Page 3 of 4
    Document1
    Inline-block makes the element a block box but does not take up the entire line so
    elements can go next to it
    Inline doesnt format as a block and the element will sit on the same line as another
    element taking up as much width as it needs rather than whole line better suited to
    elements that a blocks by default such as headers or paragraphs
    None makes the element and its content disappear from the page, this includes
    children aswell
    The box model

    This represents how you can set up each element within the body of the script and its
    properties with regards to its neighbouring features
    Margin
    This moves the element relative to nearby elements and relative to the documents walls
    Auto- automatically puts equal left and right margins so centres the page
    Can specify particular margin with margin-position:
    Can specify all margins in turn in 1 command: margin: /*some value*/ going clockwise
    from the top, listing multiple values affects each individual margin in turn
    Values in margin effectively just move element that many pixels in the opposite direction
    This means can use negative values to move element in that direction
    Border
    Puts a border around the element and can be changed with css as standard
    Padding
    Distance between border and innermost layer(actual content)
    Is encoded in the same way as margins
    Float
    When you float an element on the page, you're telling the webpage: "I'm about to tell you
    where to put this element, but you have to put it into the flow of other elements." This
    means that if you have several elements all floating, they all know the others are there and
    don't land on top of each other.
    If an element does not have the float command then other elements may end up in a
    position where they obstruct it. Using clear:left/right/both moves the element to
    immediately below the elements in the float either
    Static
    This positions the element where it would normally go, this is the default setting for
    positioning
    Absolute positioning
    An element with this positioning will be positioned relative to the first parent element that
    does not have position static, if there is no such element it gets positioned relative to
    <html>

    Page 4 of 4
    Document1
    Relative positioning
    Tells the element to move relevant to which it would go if it was default positioning
    If a relative positioning element is given a margin then it moves relative to where it would
    originally have been
    Fixed positioning
    This fixdies the element relative to the browser screen, so as the page is scrolled up and
    down this element will stay fixed
    Grid layout

    Вам также может понравиться