美文网首页
Make a simple website

Make a simple website

作者: FTVBeginning | 来源:发表于2016-05-04 13:41 被阅读0次

    HTML:Hyper Text Markup Language is used to give websites structure with text,links,images, and other fundamental elements.
    CSS: Cascading Style Sheets is used to change the appearance of HTML elements.

    [HTML]
    Headings:
    h1-h6(From the biggest to the smallest)
    Example:
    <h1>Heading</h1>

    Paragraph:
    It is used for non-heading text
    Example:
    <p>text</p>

    Link:
    Example:
    <a href="http://codecademy.com">Click here</a> to learn how to make a website!

    Image:
    Example:


    HTML video:
    Example:
    <video width="320" height="240" controls> <source src="video-url.mp4" type="video/mp4"></video>
    width & height: set the size of the screen that displays the video.
    controls:adds play, pause and volume control.
    source src: sets the URL of the video to play.
    type: specifies different video formats.

    List:
    Example:
    <ul>
    <li>A list item</li>
    <li>A second list item</li>
    <li>A third list item</li>
    </ul>

    ul: tags create the unordered list
    li: tags contain each list item.

    Div:
    Example:
    <div class="main">
    ...
    </div>
    div : divides page by enclosing groups of elements can be organized, moved and styled independently from others.

    [CSS]
    A html file link to a css file like this:
    <link rel="stylesheet" type="text/css" href="main.css"/>
    rel: specifies the relationship between files
    type: specifies the type of file link to
    href: provides the URL of the file being linked to

    selector: h1{
    property&value: color:red;
    }

    CSS properties:
    three ways to represent color:
    color:red
    color: #FF0000 Hexadecimal color(#RRGGBB)
    color:rgb(128,0,128) RGB(Red,Green,Blue)

    class selector can be identified by a dot "."
    Example:
    .main{
    color:#ffffff;
    }

    websites often use more than one font family.
    For example:
    font-family: 'Trebuchet MS', Helvetica, sans-serif;

    font-size:
    There are three ways to set font-size:
    1.pixel(px):Standard unit of measurement for sizing fonts and other HTML elements.
    2.rem: Represents the default font size for the web browser. On most web browsers, 1rem equals to 16px, 2rem equals to 32px and so on.
    3.em: A relative value that changes in proportion to the size of the parent element. For example, if a parent element has font-size:20px; child elements with font-size: 1em; mean 20px.

    using a '# 'symbol to edit id attribute
    id attribute takes precedence over class

    Boundaris and space:

    content: includes text, images……
    padding: the space between the contant and the border
    border: the outline of an HTML page element.
    margin: the space between the HTML page element and the next nearest element.
    margin->border->padding->content

    border:
    requires three parts:
    thickness: using pixels,ems,or rems
    type:sets the border type
    color

    Example:
    p {
    border: 2px solid black;
    }

    Display:
    There are two display types: inline & block
    Example:
    li {
    display: inline;
    }

    folat: floats elements left or right
    Example:
    .logo{
    float: left;
    }

    flex: can be used to align multiple page elements horizontally

    Example:
    .parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    }
    flex-wrap:wrap: makes sure no child element moves off the page
    justify-content: center: centers rows of elements

    position: posits elements in exact locations on a webpage.
    Example:
    .container {
    position: relative;
    top: 10px;
    left: 20px;
    }

    :active is a psuedo-class selector, which we use to style an element only while it's being clicked

    Bootstrap split the webpage into 12 vertical bars.

    Bootstrap classes:
    row: Arranges HTML elements in rows, and can be useful when building headers/navigation menus, main feature sections, supporting content sections and footers.

    jumbotron: Used to create large showcase sections featuring important content.

    col-sm-*: Used to span a specified number of columns on the Bootstrap grid. The "sm" is short for "small", and maintains desired CSS layouts on small screens (tablet-sized).

    text-right: Bootstrap class used to orient text to the right side of the webpage.

    btn btn-primary: Bootstrap class used to style page elements as buttons.

    相关文章

      网友评论

          本文标题:Make a simple website

          本文链接:https://www.haomeiwen.com/subject/pjahrttx.html