134-web-technologies Flashcards
HTML (Hyper Text Markup Language) -
- standard markup language for creating n defining web pages.
- Structural layer, describes structure + order of webpage and the text and images to browser.
- browser reads, n interpret html tags to render web page visually for viewer
- HTML document made up of head (contains metadata: title, character set, styles, scripts etc) and body (page contents)
HTML elements and attributes
elements: building blocks of HTML pages, defines web page. Consist of start n end tags. Can have attributes (provides additional info about element) that come in name-value pairs e.g charset=“utf-8” (name=“value”)).
HTML tag <html>
goes at top of page to let browser know it’s a HTML file. All code written within is interpreted as HTML. Closing tag ends file. <html> </html>
HTML tag <link></link>
links external CSS file so style can be saved on another sheet (same style sheet can be used for multiple HTML pages). <link rel=“stylesheet” href=“style.css” /> href is the path to file
HTML tag <title></title>
metadata tag. puts title in browser window bar/tab (not on page) <title> </title>
HTML tag <body>
main content (headings, paragraphs, images, hyperlinks, tables, lists etc) that’s not metadata. <body> </body>
HTML tag <h1> <h2> <h3>
heading tags. h1 is the biggest, h6 the smallest. <h1> </h1>
HTML tag <img></img>
used to import/embed a picture. e.g <img src =“picture.jpg” width=“500px” height=“500px” />
HTML tag <head>
<head> </head>
container for metadata about the html document
HTML tag <a></a>
hyperlink to another page <a href=“contactus.html”> Click to contact us! </a>
HTML tag <div>
used for divisions of areas (like invisible boxes) in a page and can apply different styles to each part e.g borders, background colours for the divs. Can give it a ID to be referenced in JavaScript. E.g id=“mydiv”> Here is a div</div> or <div class=“introclass”>
HTML tag <form>
to create an input form. <form> <label for=“fname” > first name: </label> <input type=“text” id=“fname” name=“fname” placeholder=“enter name here”> </form> <br></br> can be used inside <form> to create blank lines between input boxes
HTML tag <input></input> for form
- <input type=“text”> for single line text input, can replace “text” with “radio” for radio button (for one of multiple choices), or “checkbox” for ticking choices, or “submit” for displaying a submit button, or “button” for displaying a clickable button
HTML accessing a input element with type “submit” -
var x=document.getElementById(“mySubmit”);
HTML tag <p>
<p> makes a paragraph with a line space above and below, text is entered between </p>
HTML tag <ol>
ordered list (basically a list with numbers/alphabets instead of bullet points). Each element in list is defined with <li> tag. E.g <ol> <li> Dog </li> <li> Cat> </li> <li> Mouse </li> </ol> would look like 1. Dog 2. Cat 3. Mouse
HTML tag <ul>
unordered list (uses bullet points). Each element in list is defined with <li> tag. <ul> <li> Fish </li> <li> Cabbage </li> <li> Duck </li> </ul> would look like • Dog • Cat • Mouse
HTML tag
for JavaScript code, placed in <head> tag <script type=“text/javascript”> alert(‘test’);
or if want to link external js file <script src=“/myscript.js”>
HTML identity (id) attribute
unique id given to an element on a web page to point to a specific style declaration (can only be used by one html element within a page). Or used by JavaScript to access/manipulate the element with the id. defined in head tag or external css file. Uses #. E.g #m1 { color:white; font-family: Arial; background-color:black; } <h1 id=“m1”> testing </h1> the properties of the id are in the { }
HTML class attribute
can be used by multiple HTML elements. Defined in <head> tag or external css file. Uses the dot: . Example: .m1 { color:white; background-color:black; } <h1 class=“m1” > Hello World </h1>
CSS (cascading style sheets)
- describe style of a webpage (tells browser how HTML elements are displayed/presentation layer).
- uses selectors classes and ids etc
-to define the formatting of a website
to change the formatting depending on a device
to give a consistent look to every page
to set the formatting - if multiple styles have been applied to the same element, it will take on the last style sheet - however, follows a cascading order: all styles in a page will cascade into a new style sheet with inline style being the highest priority, then external/internal style sheets in head, then browser default. Inline has highest priority so will override the external/internal/browser ones on the same element.
- can be placed within HTML or externally in a file
- Allows developers to control layout of multiple elements/web pages at once (using ids and class/external css).
- Forms: inline CSS, internal CSS, external CSS.
Inline CSS style
to apply a unique style for a single element. Defined in body tag. E.g <h1 style=“color:blue; text-align:center;” example</h1> <div style= “border: 1px solid black; color: red”> example </div>
Internal CSS style sheet
used if a single HTML page has a unique style, but for multiple elements. Defined inside <style> element inside <head> section. E.g <head> <style> body { border:-style:dotted; border-color:blue; } h1 { color:maroon; margin-left: 40px; } </style> </head></style>
External CSS style sheet
can be used for multiple elements for multiple pages for the same style. Defined inside <head>, external CSS sheet is linked with <link></link> tag . E.g <link rel=“stylesheet” href=“mystyle.css”> mystyle.css could have body { color:#34ee34; } #m1 { font-size:24px; } border:-style:dotted; border-color:blue