HTML Form Tags and Groupings
For this session basic HTML was reviewed together with the beginnings of CSS.
Three distinct concepts were covered:
- Additional HTML form tags
- Groupings in HTML
- Basic CSS
Additional Form Tags: There are also various form tags such as “slider”, permutations of “date”/”time”, and “color”. Placeholder values, arguments such as readonly and general practice with HTML forms was completed today.
<html>
<head>
<style>
* { margin : 10px }
</style>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>formoption3</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<body>
disabled:
<fieldset>
<legend>writing here:</legend><form>
<p>write: <input type="text" value="abcd" readonly/></p>
<p>title: <input type="text"/></p>
<textarea cols="30" rows="10"></textarea>
<input type="submit" value="ubit"/>
<input type="reset" value="reset"/>
</form>
</fieldset>
</body>
</html>
<html>
<head>
<style>
* { margin : 10px }
</style>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>formoption3</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<body>
disabled:
<fieldset>
<legend>writing here:</legend><form>
<p>write: <input type="text" value="abcd" readonly/></p>
<p>title: <input type="text"/></p>
<textarea cols="30" rows="10"></textarea>
<input type="submit" value="ubit"/>
<input type="reset" value="reset"/>
</form>
</fieldset>
</body>
</html>
<html>
<head>
<style>
* { margin : 10px }
</style>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>formoption3</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
</head>
<body>
disabled:
<fieldset>
<legend>writing here:</legend><form>
<p>write: <input type="text" value="abcd" readonly/></p>
<p>title: <input type="text"/></p>
<textarea cols="30" rows="10"></textarea>
<input type="submit" value="ubit"/>
<input type="reset" value="reset"/>
</form>
</fieldset>
</body>
</html>
Groupings: Groupings, or <div> tags, more generally, is a core concept in HTML. <div> tags do not have any visual effects on the HTML file, but they allow for blocks of text and tags to be assigned a class or id value that can be called. Additionally, tags themselves can be called, as will be seen with CSS below.
A default layout with groupings would be “header” -> “main” -> “footer”, but any <div> tags can be assigned any unique values.
<!DOCTYPE html>
layoutprac
Content 1
Content 2
Content 3
Basic CSS Usage: CSS can be incorporated within an HTML file, or outside of it. CSS within the body of an HTML file is referred to as inline CSS, and takes the form of the [style] argument within a tag. CSS can also be written into a
An external CSS file can be linked to an HTML file as a stylesheet, or can be called within the
OR
OR
OR
123
</code></pre>
---
CSS Selections:
This is where groupings come together with CSS. CSS can be applied to types/tags, to tags with argument [id="name"] referenced by # or [class="name"] referenced by '.'
class
class selection
learned items
tag selector
id selector
class selector
unlearned items
spring
etc.
-gonkgonk