#tag fieldset html | Explore Tumblr posts and blogs

hydralisk98 · 5 years ago

Photo

hydralisk98′s web projects tracker:

Core principles=

Fail faster

‘Learn, Tweak, Make’ loop

This is meant to be a quick reference for tracking progress made over my various projects, organized by their “ultimate target” goal:

(START)

(Website)=

Install Firefox

Install Chrome

Install Microsoft newest browser

Install Lynx

Learn about contemporary web browsers

Install a very basic text editor

Install Notepad++

Install Nano

Install Powershell

Install Bash

Install Git

Learn HTML

Elements and attributes

Commenting (single line comment, multi-line comment)

Head (title, meta, charset, language, link, style, description, keywords, author, viewport, script, base, url-encode, )

Hyperlinks (local, external, link titles, relative filepaths, absolute filepaths)

Headings (h1-h6, horizontal rules)

Paragraphs (pre, line breaks)

Text formatting (bold, italic, deleted, inserted, subscript, superscript, marked)

Quotations (quote, blockquote, abbreviations, address, cite, bidirectional override)

Entities & symbols (&entity_name, &entity_number, &nbsp, useful HTML character entities, diacritical marks, mathematical symbols, greek letters, currency symbols, )

Id (bookmarks)

Classes (select elements, multiple classes, different tags can share same class, )

Blocks & Inlines (div, span)

Computercode (kbd, samp, code, var)

Lists (ordered, unordered, description lists, control list counting, nesting)

Tables (colspan, rowspan, caption, colgroup, thead, tbody, tfoot, th)

Images (src, alt, width, height, animated, link, map, area, usenmap, , picture, picture for format support)

old fashioned audio

old fashioned video

Iframes (URL src, name, target)

Forms (input types, action, method, GET, POST, name, fieldset, accept-charset, autocomplete, enctype, novalidate, target, form elements, input attributes)

URL encode (scheme, prefix, domain, port, path, filename, ascii-encodings)

Learn about oldest web browsers onwards

Learn early HTML versions (doctypes & permitted elements for each version)

Make a 90s-like web page compatible with as much early web formats as possible, earliest web browsers’ compatibility is best here

Learn how to teach HTML5 features to most if not all older browsers

Install Adobe XD

Learn Adobe XD basics

Learn Figma basics

Install Microsoft’s VS Code

Install my Microsoft’s VS Code favorite extensions

Learn HTML5

Semantic elements

Layouts

Graphics (SVG, canvas)

Track

Audio

Video

Embed

APIs (geolocation, drag and drop, local storage, application cache, web workers, server-sent events, )

HTMLShiv for teaching older browsers HTML5

HTML5 style guide and coding conventions (doctype, clean tidy well-formed code, lower case element names, close all html elements, close empty html elements, quote attribute values, image attributes, space and equal signs, avoid long code lines, blank lines, indentation, keep html, keep head, keep body, meta data, viewport, comments, stylesheets, loading JS into html, accessing HTML elements with JS, use lowercase file names, file extensions, index/default)

Learn CSS

Selections

Colors

Fonts

Positioning

Box model

Grid

Flexbox

Custom properties

Transitions

Animate

Make a simple modern static site

Learn responsive design

Viewport

Media queries

Fluid widths

rem units over px

Mobile first

Learn SASS

Variables

Nesting

Conditionals

Functions

Learn about CSS frameworks

Learn Bootstrap

Learn Tailwind CSS

Learn JS

Fundamentals

Document Object Model / DOM

JavaScript Object Notation / JSON

Fetch API

Modern JS (ES6+)

Learn Git

Learn Browser Dev Tools

Learn your VS Code extensions

Learn Emmet

Learn NPM

Learn Yarn

Learn Axios

Learn Webpack

Learn Parcel

Learn basic deployment

Domain registration (Namecheap)

Managed hosting (InMotion, Hostgator, Bluehost)

Static hosting (Nertlify, Github Pages)

SSL certificate

FTP

SFTP

SSH

CLI

Make a fancy front end website about

Make a few Tumblr themes

===You are now a basic front end developer!

Learn about XML dialects

Learn XML

Learn about JS frameworks

Learn jQuery

Learn React

Contex API with Hooks

Learn Vue.js

Vuex

NUXT

Learn Svelte

NUXT (Vue)

Learn Gatsby

Learn Gridsome

Learn Typescript

Make a epic front end website about

===You are now a front-end wizard!

Learn Node.js

Express

Nest.js

Koa

Learn Python

Django

Flask

Learn GoLang

Revel

Learn PHP

Laravel

Slim

Symfony

Learn Ruby

Ruby on Rails

Sinatra

Learn SQL

PostgreSQL

MySQL

Learn ORM

Learn ODM

Learn NoSQL

MongoDB

RethinkDB

CouchDB

Learn a cloud database

Firebase, Azure Cloud DB, AWS

Learn a lightweight & cache variant

Redis

SQLlite

NeDB

Learn GraphQL

Learn about CMSes

Learn Wordpress

Learn Drupal

Learn Keystone

Learn Enduro

Learn Contentful

Learn Sanity

Learn Jekyll

Learn about DevOps

Learn NGINX

Learn Apache

Learn Linode

Learn Heroku

Learn Azure

Learn Docker

Learn testing

Learn load balancing

===You are now a good full stack developer

Learn about mobile development

Learn Dart

Learn Flutter

Learn React Native

Learn Nativescript

Learn Ionic

Learn progressive web apps

Learn Electron

Learn JAMstack

Learn serverless architecture

Learn API-first design

Learn data science

Learn machine learning

Learn deep learning

Learn speech recognition

Learn web assembly

===You are now a epic full stack developer

Make a web browser

Make a web server

===You are now a legendary full stack developer

[...]

(Computer system)=

Learn to execute and test your code in a command line interface

Learn to use breakpoints and debuggers

Learn Bash

Learn fish

Learn Zsh

Learn Vim

Learn nano

Learn Notepad++

Learn VS Code

Learn Brackets

Learn Atom

Learn Geany

Learn Neovim

Learn Python

Learn Java?

Learn R

Learn Swift?

Learn Go-lang?

Learn Common Lisp

Learn Clojure (& ClojureScript)

Learn Scheme

Learn C++

Learn C

Learn B

Learn Mesa

Learn Brainfuck

Learn Assembly

Learn Machine Code

Learn how to manage I/O

Make a keypad

Make a keyboard

Make a mouse

Make a light pen

Make a small LCD display

Make a small LED display

Make a teleprinter terminal

Make a medium raster CRT display

Make a small vector CRT display

Make larger LED displays

Make a few CRT displays

Learn how to manage computer memory

Make datasettes

Make a datasette deck

Make floppy disks

Make a floppy drive

Learn how to control data

Learn binary base

Learn hexadecimal base

Learn octal base

Learn registers

Learn timing information

Learn assembly common mnemonics

Learn arithmetic operations

Learn logic operations (AND, OR, XOR, NOT, NAND, NOR, NXOR, IMPLY)

Learn masking

Learn assembly language basics

Learn stack construct’s operations

Learn calling conventions

Learn to use Application Binary Interface or ABI

Learn to make your own ABIs

Learn to use memory maps

Learn to make memory maps

Make a clock

Make a front panel

Make a calculator

Learn about existing instruction sets (Intel, ARM, RISC-V, PIC, AVR, SPARC, MIPS, Intersil 6120, Z80...)

Design a instruction set

Compose a assembler

Compose a disassembler

Compose a emulator

Write a B-derivative programming language (somewhat similar to C)

Write a IPL-derivative programming language (somewhat similar to Lisp and Scheme)

Write a general markup language (like GML, SGML, HTML, XML...)

Write a Turing tarpit (like Brainfuck)

Write a scripting language (like Bash)

Write a database system (like VisiCalc or SQL)

Write a CLI shell (basic operating system like Unix or CP/M)

Write a single-user GUI operating system (like Xerox Star’s Pilot)

Write a multi-user GUI operating system (like Linux)

Write various software utilities for my various OSes

Write various games for my various OSes

Write various niche applications for my various OSes

Implement a awesome model in very large scale integration, like the Commodore CBM-II

Implement a epic model in integrated circuits, like the DEC PDP-15

Implement a modest model in transistor-transistor logic, similar to the DEC PDP-12

Implement a simple model in diode-transistor logic, like the original DEC PDP-8

Implement a simpler model in later vacuum tubes, like the IBM 700 series

Implement simplest model in early vacuum tubes, like the EDSAC

[...]

(Conlang)=

Choose sounds

Choose phonotactics

[...]

(Animation ‘movie’)=

[...]

(Exploration top-down ’racing game’)=

[...]

(Video dictionary)=

[...]

(Grand strategy game)=

[...]

(Telex system)=

[...]

(Pen&paper tabletop game)=

[...]

(Search engine)=

[...]

(Microlearning system)=

[...]

(Alternate planet)=

[...]

(END)

#personal project

4 notes · View notes

techfygeeks · 2 years ago

Text

HTML Forms: Building Interactive User Input

HTML forms play a vital role in web development, allowing users to input and submit data on websites. Whether it's a simple contact form or a complex registration form, understanding how to build interactive user input forms is essential for creating engaging and dynamic web experiences. In this blog post, we will explore the fundamentals of HTML forms and discuss best practices for building interactive user input.

<form> Tag:

The <form> tag is the foundation of HTML forms. It acts as a container for all form elements and defines the boundaries of the form. The "action" attribute specifies the URL where the form data will be submitted, and the "method" attribute determines the HTTP method to be used (GET or POST).

<input> Tag:

The <input> tag is the most commonly used form element. It allows users to input various types of data, such as text, numbers, email addresses, and more. The "type" attribute defines the input type, and additional attributes like "name" and "placeholder" provide further context and guidance for users.

<textarea> Tag:

The <textarea> tag is used to create a multiline text input field. It's ideal for capturing longer messages, comments, or descriptions from users. The "rows" and "cols" attributes can be used to define the size of the textarea.

<select> and <option> Tags:

The <select> tag creates a dropdown menu, while the <option> tag defines individual options within the dropdown. This combination allows users to select one or multiple choices from a list. Attributes such as "selected" and "disabled" provide additional functionality and user experience enhancements.

<label> Tag:

The <label> tag is used to associate a label with an input field, providing a clear description or prompt for the user. It improves accessibility and helps users understand the purpose of each input field. The "for" attribute should match the "id" attribute of the corresponding input field.

<button> Tag:

The <button> tag creates clickable buttons within the form. It can trigger form submission or perform other actions using JavaScript. The "type" attribute can be set to "submit" to submit the form, "reset" to reset form values, or "button" for custom actions.

<fieldset> and <legend> Tags:

The <fieldset> tag groups related form elements together, providing a visual and semantic grouping. The <legend> tag is used to provide a caption or title for the fieldset. This combination improves form structure and readability, especially for complex forms.

Form Validation:

HTML5 introduced built-in form validation, allowing developers to validate user input without relying solely on server-side validation. Attributes like "required," "min," "max," and "pattern" can be used to enforce specific rules on input fields. HTML5 also provides the "pattern" attribute, which accepts regular expressions for custom validations.

Handling Form Submissions:

When a user submits a form, the data is typically sent to a server for processing. Server-side scripts, such as PHP or JavaScript, are used to handle form submissions and process the data accordingly. The server-side script specified in the form's "action" attribute receives the form data, which can be accessed and processed further.

Styling and Enhancing Forms:

HTML forms can be customized and styled using CSS to match the website's design and branding. Additionally, JavaScript libraries and frameworks like jQuery and React can be used to enhance form interactivity, provide real-time validation, or create dynamic form elements.

Conclusion:

Building interactive user input forms is an essential skill for web developers. HTML provides a range of form elements and attributes to collect user input and create engaging web experiences.

To streamline the development process, leveraging online HTML compilers can be incredibly beneficial. online html compiler offer a convenient way to test and validate forms in real-time, allowing developers to see the immediate results of their code. These tools provide an interactive environment to experiment with different form elements, input validation, and styling, enabling faster iterations and bug detection.

Remember to combine HTML forms with server-side scripting, such as PHP or JavaScript, to handle form submissions and process the data effectively. Additionally, css compiler online can be utilized to style and customize form elements, ensuring a cohesive and visually appealing user interface.

By mastering the art of building interactive user input forms and utilizing html compiler online, developers can create seamless and user-friendly experiences that enhance engagement and facilitate data collection on websites. Embrace the power of HTML forms and leverage the convenience of online HTML compilers to elevate your web development skills.

0 notes

technologybrandnews · 4 years ago

Text

The HTML Essentials Cheat Sheet: Tags, Attributes, and More

Here we can see, "The HTML Essentials Cheat Sheet: Tags, Attributes, and More" Get conversant in HTML tags and attributes in no time with this HTML essentials cheat sheet. Building web pages begin with HTML. Beautifying them and making them interactive comes later. But to start out creating functional static websites, you would like an understanding of HTML. (Want a fast introduction to the present markup language? Read our HTML FAQ.) As a part of learning the language, there is a long list of elements you would like to feature in your HTML vocabulary. And this task can seem daunting initially, which is why we've come up with the subsequent cheat sheet. It gives you a simple thanks to discovering/understanding/recall HTML elements whenever you like them. The cheat sheet covers tags and attributes for structuring web pages, formatting text, adding forms, images, lists, links, and tables. It also includes tags that were introduced in HTML5 and HTML codes for commonly used special characters.

The HTML Essentials Cheat Sheet

Shortcut Action Basic Tags ... The first and last tag of an HTML document. All other tags lie between these opening and closing tags. ... Specifies the collection of metadata for the document. ... Describes the title for the page and shows up in the browser’s title bar. ... Includes all content that will be displayed on the webpage. Document Information Mentions the base URL and all relative links to the document. For extra information about the page like author, publish date, etc. Links to external elements like style sheets. Contains document style information like CSS (Cascading Style Sheets). Contains links to external scripts. Text Formatting ... OR ... Makes text bold. ... Italicizes text and makes it bold. ... Italicizes text but does not make it bold. ... Strikethrough text. ... Cites an author of a quote. ... Labels a deleted portion of a text. ... Shows a section that has been inserted into the content. ... For displaying quotes. Often used with the tag. ... For shorter quotes. ... For abbreviations and full-forms. ... Specifies contact details. ... For definitions. ... For code snippets. ... For writing subscripts ... For writing superscripts. ... For reducing the text size and marking redundant information in HTML5. Document Structure ... Different levels of headings. H1 is the largest and H6 is the smallest. ... For dividing content into blocks. ... Includes inline elements, like an image, icon, emoticon, without ruining the formatting of the page. ... Contains plain text. Creates a new line. Draws a horizontal bar to show end of the section. Lists ... For ordered list of items. ... For unordered list of items. - ... For individual items in a list. ... List of items with definitions. ... The definition of a single term inline with body content. ... The description for the defined term. Links ... Anchor tag for hyperlinks. ... Tag for linking to email addresses. ... Anchor tag for listing contact numbers. ... Anchor tag for linking to another part of the same page. ... Navigates to a div section of the webpage. (Variation of the above tag) Images For displaying image files. Attributes for the tag src=”url” Link to the source path of the image. alt=”text” The text displayed when a mouse is hovered over the image. height=” ” Image height in pixels or percentages. width=” ” Image width in pixels or percentages. align=” ” Relative alignment of the image on the page. border=” ” Border thickness of the image. ... Link to a clickable map. ... Name of the map image. The image area of an image map. Attributes for the tag shape=” " Shape of the image area. coords=” ” Coordinates of the map image area. Forms ... The parent tag for an HTML form. Attributes for the tag action=”url” The URL where form data is submitted. method=” ” Specifies the form submission protocol (POST or GET). enctype=” ” The data encoding scheme for POST submissions. autocomplete Specifies if form autocomplete is on or off. novalidate Specifies whether the form should be validated before submission. accept-charsets Specifies character encoding for form submissions. target Shows where the form submission response will be displayed. ... Groups related elements in the form/ ... Specifies what the user should enter in each form field. ... A caption for the fieldset element. Specifies what type of input to take from the user. Attributes for the tag type=”” Determines the type of input (text, dates, password). name=”” Specifies the name of the input field. value=”” Specifies the value in the input field. size=”” Sets the number of characters for the input field. maxlength=”” Sets the limit of input characters allowed. required Makes an input field compulsory. width=”” Sets width of the input field in pixels. height=”” Sets height of the input field in pixels. placeholder=”” Describes expected field value. pattern=”” Specifies a regular expression, which can be used to look for patterns in the user’s text. min=”” The minimum value allowed for an input element. max=”” The maximum value allowed for an input element. disabled Disables the input element. ... For capturing longer strings of data from the user. ... Specifies a list of options which the user can choose from. Attributes for the tag name=”” Specifies name for a dropdown list. size=”” Number of options given to the user. multiple Sets whether the user can choose multiple options from the list. required Specifies whether choosing an option/s is necessary for form submission. autofocus Specifies that a drop-down list automatically comes into focus after a page loads. ... Defines items in a dropdown list. value=”” Displays the text for any given option. selected Sets default option that is displayed. ... Tag for creating a button for form submission. Objects and iFrames ... Describes the embedded filetype. Attributes for the tag height=”” The height of the object. width=”” The width of the object. type=”” The type of media the object contains. ... An inline frame for embedding external information. name=”” The name of the iFrame. src=”” The source URL for the content inside the frame. srcdoc=”” The HTML content within the frame. height=”” The height of the iFrame. width=” ” The width of the iFrame. Adds extra parameters to customize the iFrame. ... Embeds external application or plugin. Attributes for the tag height=” “ Sets the height of the embed. width=” “ Sets the width of the embed. type=”” The type or format of the embed. src=”” The source path of the embedded file. Tables ... Defines all content for a table. ... A description of the table. ... Headers for each column in the table. ... Defines the body data for the table. ... Describes the content for the table’s footer. ... Content for a single row. ... The data in a single header item. ... Content within a single table cell. ... Groups columns for formatting. A single column of information. HTML5 New Tags ... Specifies the webpage header. ... Specifies the webpage footer. ... Marks main content of the webpage. ... Specifies an article. ... Specifies sidebar content of a page. ... Specifies a particular section in the webpage. ... For describing extra information. ... Used as a heading for the above tag. Is always visible to the user. ... Creates a dialog box. ... Used for including charts and figures. ... Describes a element. ... Highlights a specific part of the text. ... Set of navigation links on a webpage. ... A particular item from a list or a menu. ... Measures data within a given range. ... Places a progress bar and tracks progress. ... Displays text that do not support Ruby annotations. ... Displays East Asia typography character details. ... A Ruby annotation for East Asian typography. ... Identifies time and date. A line break within the content. ¹HTML5 Character Objects " ; OR " ; Quotation marks Lesser than sign ( ; OR > ; Greater than sign (>) ; OR ; Non-breaking space © ; OR © ; Copyright symbol ™ ; OR û ; Trademark symbol @ ; OR Ü ; “at” symbol (@) & ; OR & ; Ampersand symbol (&) • ; OR ö ; Small bullet ¹Ignore space before semicolon while typing HTML character.

Conclusion

I hope you found this guide useful. If you've got any questions or comments, don't hesitate to use the shape below.

User Questions:

- What are the 4 HTML essentials? Some of the essential tags for an HTML document are doctype, , , and . doctype is that the doctype declaration type. It's used for specifying which version of HTML the document is using. The HTML tag is that the container for all other HTML elements apart from the . you employ tags to make HTML elements, like paragraphs or links. Many elements have a gap tag and a closing tag — for instance, a p (paragraph) element features a tag, followed by the paragraph text, followed by a closing tag. - Is HTML uses predefined tags? HTML uses Pre-specified tags...for e.g.: . The anchor tag is additionally HTML tag. The anchor tag is employed for adding a hyperlink on an internet page. - Feel stuck after learning HTML&CSS? Here's the way to create websites on your own https://www.reddit.com/r/web_design/comments/2x815r/feel_stuck_after_learning_htmlcss_heres_how_to/ - I have been interviewing candidates for an internet dev position. a significant lack of data in HTML/CSS. https://www.reddit.com/r/webdev/comments/bxrbdj/just_an_observation_i_have_been_interviewing/ Read the full article

#allattributesofbodytaginhtml #attributesofbodytaginhtml #basiccssstylesheet #commonhtmltagscheatsheet #excelformulacheatsheetprintable #excelformulascheatsheet #htmlatagattributes #htmltagattributes #htmltagcheatsheet #htmltagcheatsheetpdf #htmltagsandattributes #htmltagsandattributeslist #htmltagscheatsheet #sqlcommandscheatsheet #whataretheattributesofbodytaginhtml

1 note · View note

webauthoring · 5 years ago

Photo

Forms or <form></form>

Whether we like them or not, forms are all over the internet. They allow users of our websites to interact with content on our pages or submit information to a database.

Form structure is very important. We need to think how would a user fill out this form? What would be their expectations?

The fieldset tag will group information together and it can help a screenreader understand hierarchy on your form. Take a look at the below image to see the fieldset tag in action.

In smashing magazine, Stephanie Walter suggests that you place optional fields at the end of your form as the attention spans of your users are going to dwindle over time. She also recommends that you place the label in a “single-column layout” as it will be nicer for the reader. Both of the above images are an example of single column layouts, e.g. the “First Name” label is above the field with “Stephanie” in it.

However, if the user’s device is in landscape mode, you may want your labels beside your fields. Stephanie has way more tips in her article, but lets look at forms in their html form now. No pun intended.

<form> is a container tag that can contain many different types of fields for your form.

The <input> tag configures the different fields on our form, like for a name, password or email address.

A <textarea> is a larger and scrolling text box on your form. You can define it’s size by using rows and cols. For example;

This might be used for a comment or message box, or maybe an address (like in the example above).

<select> configures a select box or what is often referred to as a drop down menu.

<option> configures an option in a select box.

At the end of your form you might have a <button> tag. It might be written like;

<button type=“button”>Click Me!</button>

You could also have a submit button at the end of your form, for the user to submit their information.

There are many attributes that can be attributed to these tags. Some include;

type

name

size

maxlength

value

required

placeholder

They all attribute different values to your tag and thus help the user interact with your form in different ways. Likewise, you can later style your form using CSS.

There’s loads more about forms, but that’s all for now! :)

#html #tags #elements #forms #web design #ux #ui

0 notes

artofinternet · 5 years ago

Text

HTML forms

the beginning tag

process.php is a php file on the server. It tells the browser which file will receive the inputs from the form. From w3schools

The <form> element can contain one or more of the following form elements:

<input>

<label>

The <input> tag specifies an input field where the user can enter data.

The <input> element is the most important form element.

The <input> element can be displayed in several ways, depending on the type attribute.

From W3schools. The different input types are as follows:

<input type="text"> (default value)

0 notes

vespaengine · 8 years ago

Text

Blog search application in Vespa

Introduction

This is the first of a series of blog posts where data from WordPress.com (WP) is used to highlight how Vespa can be used to store, search and recommend blog posts. The data was made available during a Kaggle challenge to predict which blog posts someone would like based on their past behavior. It contains many ingredients that are necessary to showcase needs, challenges and possible solutions that are useful for those interested in building and deploying such applications in production.

The end goal is to build an application where:

Users will be able to search and manipulate the pool of blog posts available.

Users will get blog post recommendations from the content pool based on their interest.

This part addresses:

How to describe the dataset used as well as any information connected to the data.

How to set up a basic blog post search engine using Vespa.

The next parts show how to extend this basic search engine application with machine learned models to create a blog recommendation engine.

Dataset

The dataset contains blog posts written by WP bloggers and actions, in this case ‘likes’, performed by WP readers in blog posts they have interacted with. The dataset is publicly available at Kaggle and was released during a challenge to develop algorithms to help predict which blog posts users would most likely ‘like’ if they were exposed to them. The data includes these fields per blog post:

post_id - unique numerical id identifying the blog post

date_gmt - string representing date of blog post creation in GMT format yyyy-mm-dd hh:mm:ss

author - unique numerical id identifying the author of the blog post

url - blog post URL

title - blog post title

blog - unique numerical id identifying the blog that the blog post belongs to

tags - array of strings representing the tags of the blog posts

content - body text of the blog post, in html format

categories - array of strings representing the categories the blog post was assigned to

For the user actions:

post_id - unique numerical id identifying the blog post

uid - unique numerical id identifying the user that liked post_id

dt - date of the interaction in GMT format yyyy-mm-dd hh:mm:ss

Downloading raw data

For the purposes of this post, it is sufficient to use the first release of training data that consists of 5 weeks of posts as well as all the ‘like’ actions that occurred during those 5 weeks.

This first release of training data is available here - once downloaded, unzip it. The 1,196,111 line trainPosts.json will be our practice document data. This file is around 5GB in size.

Requirements

Indexing the full data set requires 23GB disk space. We have tested with a Docker container with 10GB RAM. We used similar settings as described in the vespa quick start guide. As in the guide we assume that the $VESPA_SAMPLE_APPS env variable points to the directory with your local clone of the vespa sample apps:

$ docker run -m 10G --detach --name vespa --hostname vespa --privileged --volume $VESPA_SAMPLE_APPS:/vespa-sample-apps --publish 8080:8080 vespaengine/vespa

Searching blog posts

Functional specification:

Blog post title, content, tags and categories must all be searchable

Allow blog posts to be sorted by both relevance and date

Allow grouping of search results by tag or category

In terms of data, Vespa operates with the notion of documents. A document represents a single, searchable item in your system, e.g., a blog post, a photo, or a news article. Each document type must be defined in the Vespa configuration through a search definition. Think of a search definition as being similar to a table definition in a relational database; it consists of a set of fields, each with a given name, a specific type, and some optional properties.

As an example, for this simple blog post search application, we could create the document type blog_post with the following fields:

url - of type uri

title - of type string

content - of type string (string fields can be of any length)

date_gmt - of type string (to store the creation date in GMT format)

The data fed into Vespa must match the structure of the search definition, and the hits returned when searching will be on this format as well.

Application Packages

A Vespa application package is the set of configuration files and Java plugins that together define the behavior of a Vespa system: what functionality to use, the available document types, how ranking will be done and how data will be processed during feeding and indexing. The search definition, e.g., blog_post.sd, is a required part of an application package — the other required files are services.xml and hosts.xml.

The sample application blog search creates a simple but functional blog post search engine. The application package is found in src/main/application.

Services Specification

services.xml defines the services that make up the Vespa application — which services to run and how many nodes per service:

<?xml version='1.0' encoding='UTF-8'?> <services version='1.0'> <container id='default' version='1.0'> <search/> <document-api/> <nodes> <node hostalias='node1'/> </nodes> </container> <content id='blog_post' version='1.0'> <search> <visibility-delay>1.0</visibility-delay> </search> <redundancy>1</redundancy> <documents> <document mode='index' type='blog_post'/> </documents> <nodes> <node hostalias='node1'/> </nodes> <engine> <proton> <searchable-copies>1</searchable-copies> </proton> </engine> </content> </services>

<container> defines the container cluster for document, query and result processing

<search> sets up the search endpoint for Vespa queries. The default port is 8080.

<document-api> sets up the document endpoint for feeding.

<nodes> defines the nodes required per service. (See the reference for more on container cluster setup.)

<content> defines how documents are stored and searched

<redundancy> denotes how many copies to keep of each document.

<documents> assigns the document types in the search definition — the content cluster capacity can be increased by adding node elements — see elastic Vespa. (See also the reference for more on content cluster setup.)

<nodes> defines the hosts for the content cluster.

Deployment Specification

hosts.xml contains a list of all the hosts/nodes that is part of the application, with an alias for each of them. Here we use a single node:

<?xml version="1.0" encoding="utf-8" ?> <hosts> <host name="localhost"> <alias>node1</alias> </host> </hosts>

Search Definition

The blog_post document type mentioned in src/main/application/service.xml is defined in the search definition. src/main/application/searchdefinitions/blog_post.sd contains the search definition for a document of type blog_post:

search blog_post { document blog_post { field date_gmt type string { indexing: summary } field language type string { indexing: summary } field author type string { indexing: summary } field url type string { indexing: summary } field title type string { indexing: summary | index } field blog type string { indexing: summary } field post_id type string { indexing: summary } field tags type array<string> { indexing: summary } field blogname type string { indexing: summary } field content type string { indexing: summary | index } field categories type array<string> { indexing: summary } field date type int { indexing: summary | attribute } } fieldset default { fields: title, content } rank-profile post inherits default { first-phase { expression:nativeRank(title, content) } } }

document is wrapped inside another element called search. The name following these elements, here blog_post, must be exactly the same for both.

The field property indexing configures the indexing pipeline for a field, which defines how Vespa will treat input during indexing — see indexing language. Each part of the indexing pipeline is separated by the pipe character ‘|’:

index: Create a search index for this field

attribute: Store this field in memory as an attribute — for sorting, searching and grouping

summary: Let this field be part of the document summary in the result set

Deploy the Application Package

Once done with the application package, deploy the Vespa application — build and start Vespa as in the quick start. Deploy the application:

$ cd /vespa-sample-apps/blog-search $ vespa-deploy prepare src/main/application && vespa-deploy activate

This prints that the application was activated successfully and also the checksum, timestamp and generation for this deployment (more on that later). Pointing a browser to http://localhost:8080/ApplicationStatus returns JSON-formatted information about the active application, including its checksum, timestamp and generation (and should be the same as the values when vespa-deploy activate was run). The generation will increase by 1 each time a new application is successfully deployed, and is the easiest way to verify that the correct version is active.

The Vespa node is now configured and ready for use.

Feeding Data

The data fed to Vespa must match the search definition for the document type. The data downloaded from Kaggle, contained in trainPosts.json, must be converted to a valid Vespa document format before it can be fed to Vespa. Find a parser in the utility repository. Since the full data set is unnecessarily large for the purposes of this first part of this post, we use only the first 10,000 lines of it, but feel free to load all 1,1M entries:

$ head -10000 trainPosts.json > trainPostsSmall.json $ python parse.py trainPostsSmall.json > feed.json

Send this to Vespa using one of the tools Vespa provides for feeding. Here we will use the Java feeding API:

$ java -jar $VESPA_HOME/lib/jars/vespa-http-client-jar-with-dependencies.jar --verbose --file feed.json --host localhost --port 8080

Note that in the sample-apps/blog-search directory, there is a file with sample data. You may also feed this file using this method.

Track feeding progress

Use the Metrics API to track number of documents indexed:

$ curl -s 'http://localhost:19112/state/v1/metrics' | tr ',' '\n' | grep -A 2 proton.doctypes.blog_post.numdocs

You can also inspect the search node state by

$ vespa-proton-cmd --local getState

Fetch documents

Fetch documents by document id using the Document API:

$ curl -s 'http://localhost:8080/document/v1/blog-search/blog_post/docid/1750271' | python -m json.tool

The first query

Searching with Vespa is done using a HTTP GET requests, like:

<host:port>/<search>?<yql=value1>&<param2=value2>...

The only mandatory parameter is the query, using yql=<yql query>. More details can be found in the Search API.

Given the above search definition, where the fields title and content are part of the fieldset default, any document containing the word “music” in one or more of these two fields matches our query below:

$ curl -s 'http://localhost:8080/search/?yql=select+*+from+sources+*+where+default+contains+%22music%22%3B' | python -m json.tool

Looking at the output, please note:

The field documentid in the output and how it matches the value we assigned to each put operation when feeding data to Vespa.

Each hit has a property named relevance, which indicates how well the given document matches our query, using a pre-defined default ranking function. You have full control over ranking — more about ranking and ordering later. The hits are sorted by this value.

When multiple hits have the same relevance score their internal ordering is undefined. However, their internal ordering will not change unless the documents are re-indexed.

Add &tracelevel=9 to dump query parsing details

Other examples

yql=select+title+from+sources+*+where+title+contains+%22music%22%3B

Once more a search for the single term “music”, but this time with the explicit field title. This means that we only want to match documents that contain the word “music” in the field title. As expected, you will see fewer hits for this query, than for the previous one.

yql=select+*+from+sources+*+where+default+contains+%22music%22+AND+default+contains+%22festival%22%3B

This is a query for the two terms “music” and “festival”, combined with an AND operation; it finds documents that match both terms — but not just one of them.

yql=select+*+from+sources+*+where+sddocname+contains+%22blog_post%22%3B

This is a single-term query in the special field sddocname for the value “blog_post”. This is a common and useful Vespa trick to get the number of indexed documents for a certain document type (search definition): sddocname is a special and reserved field which is always set to the name of the document type for a given document. The documents are all of type blog_post, and will therefore automatically have the field sddocname set to that value.

This means that the query above really means “Return all documents of type blog_post”, and as such all documents in the index are returned.

Relevance and Ranking

Ranking and relevance were briefly mentioned above; what is really the relevance of a hit, and how can one change the relevance calculations? It is time to introduce rank profiles and rank expressions — simple, yet powerful methods for tuning the relevance.

Relevance is a measure of how well a given document matches a query. The default relevance is calculated by a formula that takes several factors into consideration, but it computes, in essence, how well the document matches the terms in the query. Sample use cases for tweaking the relevance calculations:

Personalize search results based on some property; age, nationality, language, friends and friends of friends.

Rank fresh (age) documents higher, while still considering other relevance measures.

Rank documents by geographical location, searching for relevant resources nearby.

Vespa allows creating any number of rank profiles: named collections of ranking and relevance calculations that one can choose from at query time. A number of built-in functions and expressions are available to create highly specialized rank expressions.

Blog popularity signal

It is time to include the notion of blog popularity into the ranking function. Do this by including the post_popularity rank profile below at the bottom of src/main/application/searchdefinitions/blog_post.sd, just below the post rank profile.

rank-profile post_popularity inherits default { first-phase { expression: nativeRank(title, content) + 10 * if(isNan(attribute(popularity)), 0, attribute(popularity)) } }

Also, add a popularity field at the end of the document definition:

field popularity type double { indexing: summary | attribute }

Notes (more information can be found in the search definition reference):

rank-profile post_popularity inherits default This configures Vespa to create a new rank profile named post_popularity, which inherits all the properties of the default rank-profile; only properties that are explicitly defined, or overridden, will differ from those of the default rank-profile.

first-phase Relevance calculations in Vespa are two-phased. The calculations done in the first phase are performed on every single document matching your query, while the second phase calculations are only done on the top n documents as determined by the calculations done in the first phase.

expression: nativeRank(title, content) + 10 * if(isNan(attribute(popularity)), 0, attribute(popularity)) Still using the basic search relevance for title and content, boosting documents based on some document level popularity signal. This expression is used to rank documents. Here, the default ranking expression — the nativeRank of the default field set — is included to make the query relevant, while the custom, second term includes the document value attribute(popularity), if this is set. The weighted sum of these two terms is the final relevance for each document.

Deploy the configuration:

$ vespa-deploy prepare src/main/application && vespa-deploy activate

Use parse.py — which has a -p option to calculate and add a popularity field — and then feed the parsed data:

$ python parse.py -p trainPostsSmall.json > feed_with_popularity.json $ java -jar $VESPA_HOME/lib/jars/vespa-http-client-jar-with-dependencies.jar --file feed_with_popularity.json --host localhost --port 8080

After feeding, query

$ curl -s 'http://localhost:8080/search/?yql=select+*+from+sources+*+where+default+contains+%22music%22%3B&ranking=post_popularity' | python -m json.tool

and find documents with high popularity values at the top.

Sorting and Grouping

What is an attribute?

An attribute is an in-memory field - this is different from index fields, which may be moved to a disk-based index as more documents are added and the index grows. Since attributes are kept in memory, they are excellent for fields which require fast access, e.g., fields used for sorting or grouping query results. The downside is higher memory usage. By default, no index is generated for attributes, and search over these defaults to a linear scan - to build an index for an attribute field, include attribute:fast-search in the field definition.

Defining an attribute field

An example is found in blog_post.sd:

field date type int { indexing: summary | attribute }

The data has format YYYYMMDD. And since the field is an int, it can be used for range searches.

Example queries using attribute field

yql=select+*+from+sources+*+where+default+contains+%2220120426%22%3B

This is a single-term query for the term 20120426 in the default field set. (The strings %22 and %3B are URL encodings for " and ;.) In the search definition, the field date is not included in the default field set. Nevertheless, the string “20120426” is found in the content of many posts, which are returned then as results.

yql=select+*+from+sources+*+where+date+contains+%2220120426%22%3B

To get documents that were created 26 April 2012, and whose date field is 20120426, replace default with date in the YQL query string. Note that since date has not been defined with attribute:fast-search, searching will be done by scanning all documents.

yql=select+*+from+sources+*+where+default+contains+%22recipe%22+AND+date+contains+%2220120426%22%3B

A query with two terms; a search in the default field set for the term “recipe” combined with a search in the date field for the value 20120426. This search will be faster than the previous example, as the term “recipe” is for a field for which there is an index, and for which the search core will evaluate the query first. (This speedup is only noticeable with the full data set!)

Range searches

The examples above searched over date just as any other field, and requested documents where the value was exactly 20120426. Since the field is of type int, however, we can use it for range searches as well, using the “less than” and “greater than” operators (< and >, or %3C and %3E URL encoded). The query

yql=select+*+from+sources+*+where+date+%3C+20120401%3B

finds all documents where the value of date is less than 20120401, i.e., all documents from before April 2012, while

yql=select+*+from+sources+*+where+date+%3C+20120401+AND+date+%3E+20120229%3B

finds all documents exactly from March 2012.

Sorting

The first feature we will look at is how an attribute can be used to change the hit order. By now, you have probably noticed that hits are returned in order of descending relevance, i.e., how well the document matches the query — if not, take a moment to verify this.

Now try to send the following query to Vespa, and look at the order of the hits:

$ curl -s 'http://localhost:8080/search/?yql=select+*+from+sources+*+where+default+contains+%22music%22+AND+default+contains+%22festival%22+order+by+date%3B' | python -m json.tool

By default, sorting is done in ascending order. This can also be specified by appending asc after the sort attribute name. Use desc to sort the in descending order:

$ curl -s 'http://localhost:8080/search/?yql=select+*+from+sources+*+where+default+contains+%22music%22+AND+default+contains+%22festival%22+order+by+date+desc%3B' | python -m json.tool

Query time data grouping

Grouping is the concept of looking through all matching documents at query-time and then performing operations with specified fields across all the documents — some common use cases include:

Find all the unique values for a given field, make one group per unique value, and return the count of documents per group.

Group documents by time and date in fixed-width or custom-width buckets. An example of fixed-width buckets could be to group all documents by year, while an example of custom buckets could be to sort bug tickets by date of creation into the buckets Today, Past Week, Past Month, Past Year, and Everything else.

Calculate the minimum/maximum/average value for a given field.

Displaying such groups and their sizes (in terms of matching documents per group) on a search result page, with a link to each such group, is a common way to let users refine searches. For now we will only do a very simple grouping query to get a list of unique values for date ordered by the number of documents they occur in and top 3 is shown:

$ curl -s 'http://localhost:8080/search/?yql=select%20*%20from%20sources%20*%20where%20sddocname%20contains%20%22blog_post%22%20limit%200%20%7C%20all(group(date)%20max(3)%20order(-count())each(output(count())))%3B' | python -m json.tool

With the full data set, you will get the following output:

{ "root": { "children": [ { "children": [ { "children": [ { "fields": { "count()": 43 }, "id": "group:long:20120419", "relevance": 1.0, "value": "20120419" }, { "fields": { "count()": 40 }, "id": "group:long:20120424", "relevance": 0.6666666666666666, "value": "20120424" }, { "fields": { "count()": 39 }, "id": "group:long:20120417", "relevance": 0.3333333333333333, "value": "20120417" } ], "continuation": { "next": "BGAAABEBGBC" }, "id": "grouplist:date", "label": "date", "relevance": 1.0 } ], "continuation": { "this": "" }, "id": "group:root:0", "relevance": 1.0 } ], "coverage": { "coverage": 100, "documents": 1000, "full": true, "nodes": 0, "results": 1, "resultsFull": 1 }, "fields": { "totalCount": 1000 }, "id": "toplevel", "relevance": 1.0 } }

The three most common unique values of date are listed, along with their respective counts.

Try to change the filter part of the YQL+ expression — the where clause — to a text match of “recipe”, or restrict date to be less than 20120401, and see how the list of unique values changes as the set of matching documents for your query changes. Try to search for the single term “Verizon” as well — a word we know is not present in the document set, and as such will match no documents — and you will see that the list of groups is empty.

Attribute limitations

Memory usage

Attributes are kept in memory at all time, as opposed to normal indexes where the data is mostly kept on disk. Even with large search nodes, one will notice that it is not practical to define all the search definition fields as attributes, as it will heavily restrict the number of documents per search node. Some Vespa installations have more than 1 billion documents per node — having megabytes of text in memory per document is not an option.

Matching

Another limitation is the way matching is done for attributes. Consider the field blogname from our search definition, and the document for the blog called “Thinking about museums”. In the original input, the value for blogname is a string built of up the three words “Thinking”, “about”, and “museums”, with a single whitespace character between them. How should we be able to search this field?

For normal index fields, Vespa does something called tokenization on the string. In our case this means that the string above is split into the three tokens “Thinking”, “about” and “museums”, enabling Vespa to match this document both for the single-term queries “Thinking”, “about” and “museums”, the exact phrase query “Thinking about museums”, and a query with two or more tokens in either order (e.g. “museums thinking”). This is how we all have come to expect normal free text search to work.

However, there is a limitation in Vespa when it comes to attribute fields and matching; attributes do not support normal token-based matching — only exact matching or prefix matching. Exact matching is the default, and, as the name implies, it requires you to search for the exact contents of the field in order to get a match.

When to use attributes

There are both advantages and drawbacks of using attributes — it enables sorting and grouping, but requires more memory and gives limited matching capabilities. When to use attributes depends on the application; in general, use attributes for:

fields used for sorting, e.g., a last-update timestamp,

fields used for grouping, e.g., problem severity, and

fields that are not long string fields.

Finally, all numeric fields should always be attributes.

Clean environment by removing all documents

vespa-remove-index removes all documents:

$ vespa-stop-services $ vespa-remove-index $ vespa-start-services

Conclusion

You should now have a basic understanding of how Vespa can help build your application. In the next blog post we will proceed to show how can we use Statistics and Machine Learning to extend a basic search application into a recommendation system.

2 notes · View notes

blobpost · 5 years ago

Text

Mini Project Retro: Building a Form with HTML & CSS

Given I recently implemented a form in React, I figured I’d go back to a smaller, unfinished assignment from the freeCodeCamp HTML & CSS track: to build a form. They’re usually pretty simple assignments: you get some user stories that will have tests against them, an example to inspire you, and off you go.

The end result is here.

I made a random post-event satisfaction form, and all in all it took about 8 hours (1 day), without adding any JavaScript to it:

Lessons

Placeholder text is bad UX, and not recommended by the Nielsen Norman group and other practitioners.

It’s in my CodePen because some of the stories require this or else the tests will fail, but seems like the industry has moved on since. It looks harmless but can be confusing for users, especially when it’s used as helper text that disappears as you type. There are plenty of alternatives to various use cases for placeholder text, which include tooltips and better labels above input fields.

Use <fieldset> and <legend> to group options or questions for better accessibility.

I hadn’t seen them much before, but wanted to experiment with them. They work together to tell screen readers that a group of form fields relate to each other, and to provide a label for the group. Screen readers read the legend before introducing them to the options. On the GOV.uk Accessibility blog, the GDS recommends using them when you have a single multiple choice question, or when you have several questions relating to the same topic -- which is how I used them.

Use <label> to make form fields more accessible.

The label tag wraps the text for a specific form control item, usually the name or label for a choice. This ties meaning to the item and makes the form more readable for screen readers Bonus: this also means you can click on the text next to a radio button to select it, rather than inside the radio button itself.

Styling the form took a lot of time (and could’ve taken longer)

It took time to get fonts and colors right. I’m not a designer but I want to make things look decent (if not pretty) even if it’s not a requirement. I worked around this by scouring Pinterest and Dribbble for pleasant color schemes, and landed on just four colors (blue, dark and light grey, and white) and a few variations for the button hover state.

What I’d do differently

Try a different layout for the fields. There’s more to do to make it readable and accessible, align the dropdowns, and so on.

Different and custom styling; I could spend forever on things like custom checkboxes and radio buttons but decided not to for the purpose of this exercise.

Make the form responsive. This wasn’t a requirement, but I’d go back in and add it later.

#frontend web development #progress diary #project retro #ux #accessibility in web design

0 notes

ladigivn · 6 years ago

Text

HTML là gì? Phân loại thẻ HTML theo mục đích sử dụng

Bài viết này trình bày những điều cơ bản cần thiết nhất về HTML. Cho dù rằng bạn là người làm website chuyên nghiệp hay nghiệp dư cũng đều phải biết về nó. Hy vọng rằng bài viết này của LADIGI sẽ hữu ích đối với những ai đã và đang tìm hiểu về HTML.

1. HTML là gì?

HTML là từ viết tắt của cụm từ HyperText Markup Language hay tiếng Việt có thể dịch ra là Ngôn ngữ đánh dấu siêu văn bản. Nó được sử dụng để tạo trang web, đối với một website có thể chứa nhiều trang được gọi là một tài liệu HTML hay tập tin HTML. Người sáng lập ra HTML là ông Tim Berners- Lee hay cũng chính là người khai sinh ra tổ chức World Wide Web và chủ tịch của hộ World Wide Web Consortium – tổ chức thiết lập các tiêu chuẩn trên internet.

Một tập tài liệu HTML được hình thành bởi các phần tử HTML quy định bằng các các cặp thẻ hay còn gọi là tag. Cặp thẻ này thường được đặt trong dấu ngoặc nhọn <html> và thường được khai báo thành một cặp. Các văn bản muốn đánh dấu bằng HTML sẽ được khai báo bên trong cặp thẻ. Cũng có một số thẻ đặc biệt thì không có thẻ đóng và dữ liệu được nằm trong thuộc tính như <img>.

HTML được gọi là ngôn ngữ đánh dấu siêu văn bản

2. HTML được xử lý như thế nào?

Sau khi tập tin HTML đã được tạo lập nên thì việc xử lý tập tin này sẽ do trình duyệt đảm nhận. Trình duyệt sẽ đọc hiểu nội dung của HTML từ các thẻ và chuyển sang văn bản để đọc, nghe hoặc hiểu.

Để kiểm tra bạn có thể chuyển qua phần HTML và Result để xem kết quả của tập tin HTML đã được tạo và sau khi qua xử lý thì như thế nào.

Ví dụ minh họa cách mà HTML được xử lý

3. Cấu trúc đoạn HTML và dùng chương trình gì tạo tập tin HTML

3.1. Cấu trúc của đoạn HTML như thế nào?

Như chúng ta đã biết thì HTML được khai báo bằng các phần tử bởi những từ khóa. Nội dung nằm bên trong đó là nội dung mà bạn cần định dạng với HTMl. Chúng ta có thể tham khảo ví dụ minh họa dưới đây để có thể khai báo một đoạn văn bản.

Và một điều quan trọng không thể không nhắc đến là trong thẻ còn có các thuộc tính. Thuộc tính thường đặt ở bên trong thẻ mở đầu. Mỗi một thuộc tính sẽ có giá trị được đặt trong ngoặc kép và cách nhau bằng dấu bằng (=) cùng với tên thuộc tính. Mỗi thẻ có thể sử dụng được nhiều thuộc tính.

Ví dụ về một đoạn code HTML

3.2. Dùng chương trình gì để tạo tập tin HTML

HTML là dạng tập tin siêu văn bản nên có thể sử dụng chương trình soạn thảo không có chức năng định dạng để tạo tập tin dạng HTML. Với window bạn có thể dùng Notepad++, trên Mac có thể dùng Textedit. Điều quan trọng là sau cùng bạn phải lưu tập tin này dưới dạng .html và sử dụng trình duyệt web để đọc nó.

Notepad++ là phần mềm thường được dùng viết code HTML

4. Phân loại thẻ HTML theo mục đích sử dụng

4.1. Thẻ HTML cơ bản

<!DOCTYPE> : Thẻ định nghĩa dạng tài liệu HTML

<html> : Thẻ này định nghĩa rằng đây là tài liệu HTML

<title>: Thẻ giúp định nghĩa tiêu đề của tập tin HTML

<body>: Thẻ định nghĩa rằng từ đây là thân tập tin HTML

<h1> tới <h6>: Thẻ định nghĩa các mục chính trong tài liệu

<p>: Thẻ định nghĩa văn bản

<br>: Thẻ chèn xuống dòng

<hr> Thẻ định nghĩa thay đổi chủ đề trong nội dung

<!-…->: Thẻ định nghĩa một comment (thẻ này chỉ là ghi chú trong tập tin HTML, không hiện ra ngoài).

4.2. Thẻ HTML định dạng

<acronym>: Thẻ định nghĩa từ viết tắt, không được hỗ trợ trong HTML5.

<abbr>: Thẻ định nghĩa từ viết tắt.

<address>: Thẻ định nghĩa thông tin liên hệ cho tác giả.

<b>: Thẻ định nghĩa văn bản bôi đậm.

<bdi>: Thẻ này hữu ích khi nhúng nội dung người dùng tạo ra với một hướng chưa biết.

<bdo>: Thẻ định nghĩa hướng của văn bản.

<big>: Thẻ định nghĩa văn bản lớn hơn, không sử dụng trong HTML5, thường sử dụng CSS để thay thế.

<blockquote>: Thẻ định nghĩa nội dung được trích dẫn từ nguồn khác.

<center>: Định nghĩa một đoạn văn bản ở giữa, không được hỗ trợ HTML5.

<cite>: Thẻ định nghĩa tên sản phẩm.

<code>: Thẻ định nghĩa một đoạn code máy tính.

<del>: Thẻ định nghĩa rằng văn bản đã bị xóa từ một tài liệu.

<dfn>: Thẻ này thay thế định nghĩa cho thuật ngữ.

<em> Thẻ định nghĩa rằng văn bản phải được nhấn mạnh.

<font>: Định nghĩa phông, màu sắc và kích cỡ văn bản.

<i>: Tạo văn bản nghiêng trong HTML4.

<ins>: Thẻ định nghĩa văn bản được chèn vào tài liệu.

<kbd>: Thẻ định nghĩa thông tin người dùng nhập.

<mark>: Thẻ định nghĩa văn bản được đánh dấu.

<meter>: Thẻ đo lường dữ liệu trong một phạm vi.

<pre>: Thẻ định nghĩa dạng văn bản có sẵn.

<progress>: Thẻ mô tả tiến trình hoàn thành nhiệm vụ.

<q>: Thẻ định nghĩa nội dung trích dẫn từ nguồn khác.

<rp>: Thẻ định nghĩa sẽ hiển thị gì lên trên trình duyệt.

<rt>: Thẻ định nghĩa giải thích, phát âm ký tự.

<ruby>: Thẻ định nghĩa chú thích ruby dành cho kiểu chữ Đông Á,

<s>: Thẻ định nghĩa rằng văn bản không đúng nữa.

<samp>: Thẻ định nghĩa mẫu đầu ra từ chương trình máy tính.

<small>: Thẻ định nghĩa đoạn nhỏ hơn.

<strong>: Thẻ định nghĩa đoạn văn bản quan trọng.

<sub>: Thẻ định nghĩa chỉ số dưới.

<sup>: Thẻ định nghĩa chỉ số trên.

<time>: Thẻ định nghĩa ngày tháng và thời gian.

<u>: Thẻ định nghĩa văn bản có phong cách khác văn bản bình thường.

<var>: Thẻ định nghĩa một biến.

<wbr>: Thẻ định nghĩa một vị trí để xuống dòng.

4.3. Thẻ nhập liệu HTML, Form và Input

<form>: Thẻ định dạng form HTML để nhập liệu.

<input>: Thẻ định nghĩa một điều khiển nhập liệu.

<textarea>: Thẻ này giống input nhưng là cả một vùng nhập liệu, không phải là một dòng.

<button>: Thẻ định nghĩa nút bấm.

<select>: Thẻ định nghĩa cả một danh sách thả xuống.

<optgroup>: Thẻ định nghĩa một nhóm lựa chọn trong danh sách thả xuống.

<option>: Thẻ định nghĩa một lựa chọn ở trong danh sách thả xuống.

<label>: Thẻ định nghĩa một nhãn cho thẻ input.

<fieldset>: Thẻ định nghĩa nhóm phần từ liên quan trong một form.

<legend>: Thẻ định nghĩa mô tả cho thẻ.

<datalist>: Thẻ chỉ định danh sách tùy chọn định trước.

<keygen>: Thẻ chỉ định cặp khóa sử dụng cho form.

<output>: Thẻ định nghĩa kết quả của phép tính.

4.4. Các khung

<frame>: Định nghĩa khung cửa sổ trong frameset.

<frameset>: Thẻ định nghĩa một bộ khung.

<noframes>: Thẻ định nghĩa nội dung thay thế cho người dùng n��u trình duyệt không có hỗ trợ nào cho thẻ frames.

Tổng kết

Bài viết đã chia sẻ những kiến thức cơ bản nhất về HTML. Có thể bạn nghĩ rằng thông tin này chỉ mang tính chất tham khảo nhưng thực tế nó cực kỳ quan trọng, là nền tảng giúp bạn có thể học HTML chuyên sâu hơn, để có thể thiết kế website.

Nguồn bài đăng: LADIGI Academy Company Link: https://ladigi.vn/html-la-gi

0 notes

captainlenfan · 6 years ago

Text

Folding X-Shape 3 in 1 Workout Exercise Bike 8-Level Magnetic Resistance Fitness

New Post has been published on https://fitnesstech.website/product/folding-x-shape-3-in-1-workout-exercise-bike-8-level-magnetic-resistance-fitness/

Folding X-Shape 3 in 1 Workout Exercise Bike 8-Level Magnetic Resistance Fitness

listing template .pcTemplate display:none; .mobileTemplatedisplay:block; <p>@media only screen and (min-width:960px) .pcTemplatedisplay:block; .mobileTemplatedisplay:none;

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td margin:0; padding:0; body background:#fff; color:#555; font-size:12px; font-family: Verdana, Arial, Helvetica, sans-serif; td,th,caption font-size:12px; h1, h2, h3, h4, h5, h6 font-weight:normal; font-size:100%; address, caption, cite, code, dfn, em, strong, th, var font-style:normal; font-weight:normal; a color:#555; text-decoration:none; a:hover text-decoration:underline; img border:none; ol,ul,li list-style:none; input, textarea, select, button font:14px Verdana,Helvetica,Arial,sans-serif; table border-collapse:collapse; html /* css common */ .clearfix:after content: "."; display: block; height:0; clear:both; visibility: hidden; .clearfix *zoom:1; <p>.flfloat:left; .frfloat:right; /*上面为css初始化*/ .containerwidth:1362px; <p>headerheight:85px;padding-top:50px;background-color:#fff; .logowidth:256px;height:83px;background:url(https://s3.amazonaws.com/EbayTemplate/etech/2018listing/logo.png) no-repeat; <p>.top_navpadding-top:15px; .top_nav lifloat:left; .top_nav li afloat:left;margin-right:10px;display:inline-block;background-color:#593713;color:#fff; width:175px;height:38px;line-height:38px;text-align:center;font-size:12px; <p>.icon_visitdisplay:inline-block;width:23px;height:22px;position:relative;background:url(https://s3.amazonaws.com/EbayTemplate/TEST/icon1.png) no-repeat;top: 5px;left: -10px; .icon_emaildisplay:inline-block;width:24px;height:15px;position:relative;background:url(https://s3.amazonaws.com/EbayTemplate/TEST/icon2.png) no-repeat;top: 3px;left: -8px; <p>/*banner*/ .bannerwidth:100%; .banner imgwidth:100%;height:320px;display:inline-block; <p>/*bigpic*/ .bigpicpadding:20px 0; .bigpic_descri pwidth:97%;color:#000;line-height:200%; .bigpic_descri spanline-height:150% !important; .bigpic_descri strongfont-weight: bold !important; <p>.bigpic_descriwidth:50%; .bigpic_descri h2color:#593713;font-size:25px;margin-bottom: 20px; .bigpic_descri h2 spanline-height:120%; .bigpic_descri .conmin-height:400px;padding:30px 10px;line-height: 26px;text-align: justify;overflow:hidden; .bigpic_descri .con imgwidth:100%; <p>#publishDescriptioncolor:#000; line-height:18px; #publishDescription img border: 0 none; height: auto; max-width: 100%; <p>/*轮播图*/ .slider width: 662px; position: relative; float:left; padding-top:672px; <p> <p>.slider>img position: absolute; left: 0; top: 0; /*transition: all 0.5s;*/ <p>.slider input[name='slide_switch'] display: none; <p>.slider label <p> float: left; cursor: pointer; /*transition: all 0.5s;*/ <p> /*Default style = low opacity*/ opacity: 1; <p>.slider label img display: block; width:158px;height:158px;margin-right:7px;margin-bottom:10px;border:1px solid #b5b5b5; <p> <p>.slider input[name='slide_switch']:checked+label <p> opacity: 1; <p>.slider input[name='slide_switch'] ~ img opacity: 0; /*transform: scale(1.1);*/ width:660px; height:660px; border:1px solid #b5b5b5; <p>.slider input[name='slide_switch']:checked+label+img opacity: 1; transform: scale(1); <p>/*item这块*/ .index_itemposition:relative; .index_more adisplay:inline-block;position:absolute;right:0;top:5px;color:#593713;font-size:20px; .index_item h2width:100%;height:40px;line-height:40px;color:#593713;font-size:20px; <p>.index_item_listpadding: 20px 0; .index_item_list li adisplay:inline-block;float:left;width:15%;margin-right:27px; .index_item_list li a:hovertext-decoration:none;background-color:#fcfcfc; .index_item_list li a:hover imgopacity:0.8; .index_item_list li:last-child amargin-right:0; .index_item_list li a imgdisplay: inline-block;width:200px;height:200px; .index_item_list pwidth:100%;padding:10px 0;line-height:20px;max-height:60px;overflow:hidden;text-align: left;font-size:12px;word-wrap:break-word;-webkit-word-wrap:break-word; .index_item_list span.index_pricedisplay:block;width:100%;text-align:left;font-size:18px;color:#593713;cursor:auto; /*选项卡*/ .edesc width:1000px; margin: 0 auto;padding-bottom:40px; .infobar position:relative;min-height:600px; .infobar li background:#2a2a2a;height:32px; line-height:32px; color:#fcfcfc; float:left; text-align:center; <p>.infobarbody color:#222222; position:absolute; width:1000px; left:0px; top:40px; display:none; line-height:120%; <p>.infobar li.first_con .infobarbody display:block; .infobar li.con2:hover .infobarbody display:block; .infobar li.con2:hover .con1display:none !important; .infobarbody p margin-bottom:8px; <p>.edesc width:100%; .infobarbody width:97%;padding:20px;height:600px;top:40px;font-size:14px;background-color:#fff;text-align:left; <p>.bottom-infolayout width: 100%; <p>.ehot-tags margin: 0 50px; .infobarwidth:100%; .infobar li width:20%;background-color:#d1c0a6;color:#fff;margin-right:0;height:40px;line-height:40px;font-size:14px; <p>.infobar li:hoverbackground-color:#593713; <p>/*footer*/ .footerposition:relative;width:100%;background-color:#593713;height:40px;margin-top:30px; .footer_mwidth:100%;padding-top:10px; .footer_m pwidth:100%;text-align: center;color:#fff;font-size:12px;line-height:20px; .footer_m p acolor:#fff;font-size:12px; <p>/*适配小屏幕*/ @media(max-width:1150px) .containerwidth:1100px; .bigpic_descriwidth:40%; .index_item_list li amargin-right:18px; .index_item_list li a imgwidth:180px;height:180px; /*bigpic*/ <p>.bigpic_descriwidth:33%; .bigpic_descri h2color:#d1c0a6;font-size:25px; .bigpic_descri .conmin-height:350px; .infobarbody width:96%; <p>

VISIT OUR STORE

SIGH UP FOR EMAIL

Folding X-Shape 3 in 1 Workout Exercise Bike 8-Level Magnetic Resistance Fitness

Features: 1. Premium 3-in-1 ways to switch upright/semi-recumbent/recumbent type 2. It has resistance bands both for arm and leg, You can have stretching exercises after cycling workout 3. Comfortable seat with high backerst 4. Hand pulse handle with pre-assembled exercise monitor 5. High-end curved crank arm with anti-slip pedal with soft shoe strap makes the pedaling training safe 6. 8 level magnetic resistance Specifications: 1. Material: Plastic & ABS & Steel 2. Color: Black/Pink/Red 3. Dimensionss: (30.7 x 5.5 x 45.7)” / (78 x 41 x 116)cm (L x W x H) 4. Weight: 45.2lbs / 20.5kg 5. Weight Capacity: 300lbs / 136kg 6. Magnetic Resistance Level: 8 7. Foldable: Yes 8. Hand Pulse: Yes 9. Model: CF-917FM 10. Suitable for: Home Use

Package Includes: 1 x Folding Exercise Bike

You might like this

more>>

Wireless 720P HD PTZ Security CCTV IP Camera

$20.49

Outdoor Amplified HD TV Antenna High Gain 36dB

$23.59

Handgunc Carrying Case Digit Password Lock Safe Tool Box

$21.49

Display Storage Containers Holder Organizer

$14.99

18oz A/C Air Conditioner System Flush Canister Gun Kit

$27.99

5 Holder Folding Organizer Rack Stage Bass Acoustic Electric

$19.99

Shipping Policy

1. Ship worldwide from New Jersey by reliable shipping companies — USPS, UPS, FEDEX, DHL, etc., and only to VERIFIED PAYPAL ADDRESS. Transport Delivery ETA. Package handling only takes 1 business day at our warehouse, so please make sure entering correct payment and shipping information before checking out. Once your payment is completed, we are not going to accept any more changes to your order.

2. International Buyers – Please Note:

a. Import duties, taxes and charges are not included in the item price or shipping charges. These charges are the buyer’s responsibility.

b. Please check with your country’s customs office to determine what these additional costs will be prior to bidding/buying.

3. Please check your shipping address carefully before checkout, it can’t be changed if order completed.

4. Orders placed on weekend will be shipped within 2 days.Notification of shipment with tracking number will be sent to buyers.

5. Standard shipping: 2-7 business days Expedited Shipping: 2-3 business days One-day Shipping: 1 business day International shipping: Varies

6.Ship within 1 business day once payment completed. Notification of shipment with tracking No. will be sent to buyer.

7.We offer discounts for combine shipping. Please contact us first if you need combine shipping, and an invoice with discount will be sent to you.

8.Please allow 5 business days for delivery to US destinations on any eBay orders and 14 business days for delivery to any International destinations. We highly recommend our buyer choose priority/expess mail for international delivery which is much more stable.

Return Policies

1. Refunds given only if item DOA and cannot be replaced via PAYPAL . If so, Please contact us with 5 days since you receive the item and and return to us within 30 days from the delivery date for exchange or refund.

2. If you need return, please contact our customer service representative, let us know the detailed problem and send us some pictures for confirmation.

Payment

Payment should be sent within 8(EIGHT) days of auction closing.

Feedback

If you are dissatisfied for any reason, please do not be quick to leave negative/neutral feedback. We work hard to make sure EVERY CUSTOMER 100% SATISFIED and resolve any problem for you.

Work Time

Work Time:Monday to Saturday

无标题文档 *margin:0;padding:0;font-family: arial,"microsoft yahei"; htmlfont-size:10px; lilist-style:none; <p>li list-style-type:none; <p>/**/ @media screen and (min-width: 320px) htmlfont-size:50px; @media screen and (min-width: 360px) htmlfont-size:56.25px; @media screen and (min-width: 375px) htmlfont-size:58.59375px; @media screen and (min-width: 400px) htmlfont-size:62.5px; @media screen and (min-width: 414px) htmlfont-size:64.6875px; @media screen and (min-width: 440px) htmlfont-size:68.75px; @media screen and (min-width: 480px) htmlfont-size:75px; @media screen and (min-width: 520px) htmlfont-size:81.25px; @media screen and (min-width: 560px) htmlfont-size:87.5px; @media screen and (min-width: 600px) htmlfont-size:93.75px; @media screen and (min-width: 640px) htmlfont-size:100px; @media screen and (min-width: 680px) htmlfont-size:106.25px; @media screen and (min-width: 720px) htmlfont-size:112.5px; @media screen and (min-width: 760px) htmlfont-size:118.75px; @media screen and (min-width: 800px) htmlfont-size:100px; @media screen and (min-width: 960px) htmlfont-size:100px; .clearfix:after visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; .m_containermax-width:7rem;margin:0 auto; <p>#publishDescription1padding:20px; #publishDescription1 img border: 0 none; height: auto; max-width: 100%; .test width: 100%; height: auto; margin: 10px 0; overflow: hidden; .test input[type="radio"] display: none; .test label position: relative; width: 100%; height: 38px; line-height: 38px; font-size:16px; background: #666; color: #fff; float: left; border-top: 1px solid #fff; cursor: pointer; text-indent: 8px; .test input[type="radio"]+span display: none; width: 100%; line-height: 22px; color: #000; cursor: default; padding:15px 30px; border: 1px solid #bbb; box-sizing: border-box; text-decoration: none; font-size:14px; .test input[type="radio"]:checked+span display: inline-block; .m_bannerwidth:100%;height:100px;margin-bottom:15px;background:darkorange;cursor: pointer; .product_txtwidth:100%;line-height:0.4rem;background:#666666;color:#fff;font-size:0.26rem;text-align: center; <p>.m_slider width:100%; position: relative; margin-bottom:0.3rem; padding-top:7.5rem; <p> <p>#publishDescription1 p,#publishDescription1 spancolor:#000;line-height:130%; #publishDescription1 strongfont-weight: bold; .m_bigpic position: absolute; left: 0; top: 0; transition: all 0.5s; <p>.m_slider input[name='m_slide_switch'] display: none; <p>.m_slider label <p> width:17%; float: left; cursor: pointer; /*transition: all 0.5s;*/ margin: 0.1rem 0.08rem; /*Default style = low opacity*/ opacity:1; <p>.m_slider label img display: block; width:1.2rem;height:1.2rem;border:1px solid #d5d5d5;display:inline-block; <p> <p>.m_slider input[name='m_slide_switch']:checked+label border-color: #666; opacity: 1; <p>.m_bigpic opacity: 0; /*transform: scale(1.1);*/ width:100%; <p> .first-picopacity:1; .m_slider input[name='m_slide_switch']:checked+label+img opacity: 1; transform: scale(1);

Folding X-Shape 3 in 1 Workout Exercise Bike 8-Level Magnetic Resistance Fitness

Package Includes: 1 x Folding Exercise Bike

Shipping + 1. Ship worldwide from New Jersey by reliable shipping companies — USPS, UPS, FEDEX, DHL, etc., and only to VERIFIED PAYPAL ADDRESS. Transport Delivery ETA. Package handling only takes 1 business day at our warehouse, so please make sure entering correct payment and shipping information before checking out. Once your payment is completed, we are not going to accept any more changes to your order. 2. International Buyers – Please Note: a. Import duties, taxes and charges are not included in the item price or shipping charges. These charges are the buyer’s responsibility. b. Please check with your country’s customs office to determine what these additional costs will be prior to bidding/buying. 3. Please check your shipping address carefully before checkout, it can’t be changed if order completed. 4. Orders placed on weekend will be shipped within 2 days.Notification of shipment with tracking number will be sent to buyers. 5. Standard shipping: 2-7 business days Expedited Shipping: 2-3 business days One-day Shipping: 1 business day International shipping: Varies 6.Ship within 1 business day once payment completed. Notification of shipment with tracking No. will be sent to buyer. 7.We offer discounts for combine shipping. Please contact us first if you need combine shipping, and an invoice with discount will be sent to you. 8.Please allow 5 business days for delivery to US destinations on any eBay orders and 14 business days for delivery to any International destinations. We highly recommend our buyer choose priority/expess mail for international delivery which is much more stable. Payment + Payment should be sent within 8(EIGHT) days of auction closing. Returns + 1. Refunds given only if item DOA and cannot be replaced via PAYPAL . If so, Please contact us with 5 days since you receive the item and and return to us within 30 days from the delivery date for exchange or refund. 2. If you need return, please contact our customer service representative, let us know the detailed problem and send us some pictures for confirmation. Feedback + If you are dissatisfied for any reason, please donot be quick to leave negative/neutral feedback. We work hard to make sure EVERY CUSTOMER 100% SATISFIED and resolve any problem for you and always leave positive feedback to all our customers. Contact us + Work Time:Monday to Saturday Reply + All replies will be sent to your email box, if you don’t get response within 24 hours (Sat. & Sun. excluded) please check your eBay My Messages in case that our emails will be filtered automatically by your settings.

0 notes

lunchkid · 6 years ago

Text

<!DOCTYPE html> <!--

Theme: Ashley v0.6 Author: Jxnblk [https://jxnblk.com] For: Tumblr [https://tumblr.com/] Terms: Protected under Creative Commons. [https://creativecommons.org/licenses/by-nc/3.0/]

--> <html lang="en"> <head> <meta charset="UTF-8">  <meta name="image:Logo" content=""/> <meta name="text:Colophon" content="Ashley theme by Jxnblk"/> <meta name="text:GoogleWebFont" content="Gentium Book Basic"/> <meta name="text:GoogleWebFontURL" content="Gentium+Book+Basic"/> <meta name="color:Background" content="#fff"/> <meta name="color:Text" content="#444"/> <meta name="color:Link" content="#09b"/> <title>{Title}{block:PostSummary} — {PostSummary}{/block:PostSummary}</title> {block:Description}<meta name="description" content="{MetaDescription}">{/block:Description} <link rel="shortcut icon" href="{Favicon}"> <link rel="apple-touch-icon" href="{PortraitURL-128}"> <link rel="alternate" type="application/rss+xml" href="{RSS}"> {block:IfGoogleWebFont} <link href='https://fonts.googleapis.com/css?family={text:GoogleWebFontURL}' rel='stylesheet' type='text/css'> {/block:IfGoogleWebFont} <meta name=viewport content='width=device-width, initial-scale=1'>  <style>

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl{margin:0;padding:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}b,strong{font-weight:bold}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}

body { color: {color:Text}; background: {color:Background}; font-family: '{text:GoogleWebFont}', Georgia, serif; font-size: 100%; line-height: 1.5; font-weight: 400; }

h1, h2, .h1, .h2 { font-weight: 400; line-height: 1.25; margin-top: .5em; }

h1, .h1 { font-size: 32px; }

h2, .h2 { font-size: 24px; }

h3, .h3 { font-size: 20px; }

h1+h2 { margin-top: 0; }

p, .p, ul, ol { font-size: 18px; }

small, .small { font-size: 14px; }

strong, .strong { font-weight: 700; }

p, ul, ol { margin-top: 1em; }

@media screen and (min-width: 480px) { h1, .h1 { font-size: 48px; } h2, .h2 { font-size: 32px; } h3, .h3 { font-size: 24px; } p, .p, ul, ol { font-size: 20px;} small, .small { font-size: 16px;} }

@media screen and (min-width: 640px) { h1, .h1 { font-size: 64px; } h2, .h2 { font-size: 48px; } h3, .h3 { font-size: 32px; } }

.wrap { width: 90%; padding: 0 5%; max-width: 48em; margin: 0 auto; overflow: hidden; }

article { margin-top: 4em; }

a { color: {color:Link}; text-decoration: none; }

a:hover { text-decoration: underline; }

header { width: 90%; padding: 2em 5% 0; max-width: 48em; margin: 0 auto; overflow: hidden; }

.logo { float: left; margin-right: 1em; }

header h1, header p { margin: 0; }

header a, a.post-title { color: {color:Text}; }

a.post-title:hover { text-decoration: none; color: {color:Link}; }

header a:hover { text-decoration: none; }

.post img, .photoset, .photoset img, .photoset_row { max-width: 100%; }

.post iframe, .video object { width: 100%; max-width: 100%; }

.post blockquote { padding-left: 1em; border-left: 1px solid #ddd; }

.post ul, .post ol { margin-left: 2em; }

.post footer ul, .post footer ol { margin: 0; }

.quote blockquote { padding: 0; border: none; font-style: italic; }

.quote .source { text-align: right; }

.post footer { padding: 0; margin-top: 1em; color: #aaa; font-style: italic; }

.post footer a { color: #aaa; }

.post footer a:hover { color: #999; }

.post footer .source { float: right; margin-right: 0; }

.post footer ul li { display: inline-block; margin-right: 1em; }

.tags { margin-top: 1em; }

.pagination { margin-top: 4em; text-align: center; line-height: 3em; overflow: hidden; }

.pagination a { display: block; height: 3em; padding: 0 1em; border-radius: 0.25em; }

.pagination a:hover { background: #eee; text-decoration: none; }

.pagination .previous { float: left; }

.pagination .next { float: right; }

footer.wrap { padding-top: 2em; padding-bottom: 2em; }

ul.pages { list-style: none; }

ul.pages li { display: inline-block; margin-right: 1em; }

ul.pages li a { display: block; height: 3em; line-height: 3em; }

/* Permalink Notes */

aside.notes { margin-top: 4em; }

ol.notes { list-style: none; margin-top: 1em; border: 1px solid #ddd; border-radius: 0.25em; }

ol.notes, ol.notes a { color: #aaa; }

li.note { display: block; line-height: 2em; padding: 0.5em 1em; border-bottom: 1px solid #ddd; } li.note:last-child { border: none; }

ol.notes li.note img.avatar { display: block; float: left; width: 2em; height: 2em; margin-right: 1em; border-radius: 0.25em; }

.notes .action a { color: {color:Text}; }

.action { display: block; margin-left: 3em; }

.notes blockquote { line-height: 1.5; margin-left: 3em; } {CustomCSS} </style> </head> <body>

<header> {block:IfLogoImage}<a href="/"><img src="{image:Logo}" class="logo" /></a>{/block:IfLogoImage} <h1><a href="/">{Title}</a></h1> {block:Description} <p>{Description}</p> {/block:Description} </header>

<div class="content wrap"> <section class="posts"> {block:NoSearchResults} <h2>Sorry, nothing found for “{SearchQuery}”.</h2> {/block:NoSearchResults}

{block:TagPage} <h2 class="h1">#{Tag}</h2> {/block:TagPage}

{block:Posts} <article class="post {PostType}"> {block:Text} {block:Title} <a href="{Permalink}" class="post-title"><h2>{Title}</h2></a> {/block:Title} {Body} {block:More}<a href="{Permalink}" class="p">Read More »</a>{/block:More} {/block:Text}

{block:Photo} {LinkOpenTag} <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"> {LinkCloseTag}

{block:Caption} {Caption} {/block:Caption} {/block:Photo}

{block:Photoset} {Photoset}

{block:Caption} {Caption} {/block:Caption} {/block:Photoset}

{block:Quote} <blockquote> <p class="h3">“{Quote}”</p>

{block:Source} <p class="source">– {Source}</p> {/block:Source} </blockquote> {/block:Quote}

{block:Link} <h2><a href="{URL}"{Target}>{Name} »</a></h2>

{block:Description} {Description} {/block:Description} {/block:Link}

{block:Chat} {block:Title} <h2>{Title}</h2> {/block:Title}

<ul> {block:Lines} <li class="{Alt}"> {block:Label} <b>{Label}</b> {/block:Label}

{Line} </li> {/block:Lines} </ul> {/block:Chat}

{block:Audio} {AudioEmbed-640} {block:Caption} {Caption} {/block:Caption} {/block:Audio}

{block:Video} {Video-700}

{block:Caption} {Caption} {/block:Caption} {/block:Video}

{block:Answer} <h2>{Asker} asked: <q>{Question}</q></h2>

{Answer} {/block:Answer}

{block:Date} <footer> <ul class="small"> <center><li><a href="{Permalink}" title="{DayOfWeek}, {DayOfMonth} {Month} {Year}, {24Hour}:{Minutes}:{Seconds}">{TimeAgo}</a><br><img src="https://ui-ex.com/images/transparent-divider-page-tumblr.png"></li</center> {block:RebloggedFrom}<li class="source"> (reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a>)</li>{/block:RebloggedFrom} {block:ContentSource} <li class="source">via <a href="{SourceURL}">{SourceTitle}</a></li> {/block:ContentSource} </ul> {block:PermalinkPage} {block:HasTags} <ul class="tags"> {block:Tags} <li> <a href="{TagURL}">#{Tag}</a> </li> {/block:Tags} </ul> {/block:HasTags} {/block:PermalinkPage} </footer> {/block:Date} </article>  {block:PostNotes} <aside class="notes"> {block:NoteCount}<p>{NoteCountWithLabel}</p>{/block:NoteCount} {PostNotes-64} </aside> {/block:PostNotes}

{/block:Posts} {block:Pagination} <div class="pagination p"> <span class="previous">{block:PreviousPage}<a href="{PreviousPage}" class="previous">{/block:PreviousPage}« Previous{block:PreviousPage}</a>{/block:PreviousPage}</span> <span class="page-numbers">{CurrentPage}/{TotalPages}</span> <span class="next">{block:NextPage}<a href="{NextPage}">{/block:NextPage}Next »{block:NextPage}</a>{/block:NextPage}</span> </div> {/block:Pagination} </section>  </div>  <footer class="small wrap"> {block:HasPages} <ul class="pages"> {block:Pages} <li><a href="{URL}">{Label}</a></li> {/block:Pages} </ul> {/block:HasPages} {block:AskEnabled}<a href="/ask">{AskLabel}</a>{/block:AskEnabled} {block:IfColophon}<p class="small">{text:Colophon}</p>{block:IfColophon} </footer> </body> </html>

0 notes

pradityaewangga · 6 years ago

Text

HTML Forms and Input

HTML Forms

HTML forms are used to pass data to a server.

An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.

The <form> tag is used to create an HTML form:

<form> . input elements . </form> HTML Forms – The Input Element

The most important form element…

View On WordPress

#http://www.w3schools.com/html/html_forms.asp

0 notes

bkcomputercafe · 7 years ago

Text

All HTML Tags List in Hindi

सभी HTML Tags के नाम और सूची (HTML Tags List)

HTML में सैंकडों Elements है. प्रयेक HTML Elements का अपना विशेष कार्य होता है. इसलिए जैसे-जैसे Webpages में नये-नये Functions की जरूरत पडती गई वैसे-वैसे ही New HTML Tags का Development होता गया.

इस Lesson में हमने लगभग All HTML Tags के नाम और उनके उपयोग के बारे में बताया है. हमने All HTML Tags की Complete List बनाई है. HTML Tags List को हमने कई Categories में बांटा है. ताकि HTML Tags को समझने में आसानी रहे.

Complete HTML Tags List

Basic Tags

HTML Basic Tags वे Tags होते है, जो एक HTML Document की Foundation रखते है. इसलिये इन्हे Foundation Tags भी कहते है. नीचे HTML Basic Tags की List और उनके उपयोग के बारे में बताया जा रहा है.

<–…–> – यह Comment Tag है. Comment Element का उपयोग HTML Document में Comment Define करने के लिए किया जाता है.

<!DOCTYPE> – DOCTYPE Element का पूरा नाम Document Type Definition होता है. DOCTYPE Element का उपयोग Document Type को Define करने के लिए किया जाता है.

<HTML> – HTML Element एक HTML Document का Root Element होता है. इससे HTML Document को Define किया जाता है.

<Head> – Head Element द्वारा HTML Document के बारे में लिखा जाता है. यह एक Webpage का Header Section होता है. जिसमे अधिकतर Meta Information को लिखा जाता है.

<Title> – Title Element का उपयोग HTML Document का Title Define करने के लिए किया जाता है. Document Title हमें Browser Window में दिखाई देता है. Document Title को Head Element में लिखा जाता है.

<Body> – Body Element से HTML Document की Body को Define किया जाता है. Body Element में एक HTML Document का Visible Part लिखा जाता है, जो Users को दिखाई देता है.

<H1> to <H6> – ये Heading Elements है. Heading Element द्वारा HTML Document में Headings को Define किया जाता है. HTML में H1 से H6 Level तक Headings बना सकते है.

<P> – इसे Paragraph Element कहते है. इसका उपयोग HTML Document में Paragraph Define करने के लिए किया जाता है.

<Hr> – <hr> Element का पूरा नाम Horizontal Line है. Hr Element से HTML Document में Horizontal Line को Define किया जाता है.

<Br> – <br> Element का पूरा नाम Break है. Br Element का उपयोग Single Line Break देने के लिए किया जाता है. मतलब आप एक Line को अलग-अलग Line में तोडकर लिख सकते है.

Formatting Tags

Formatting HTML Tags वे Tags होते है, जिनसे Document Text की Formatting की जाती है. मतलब आप Text को किस प्रकार दिखाना चाहते है. नीचे कुछ मुख्य Formatting Tags के नाम और उनके उपयोग के बारे में बताया जा रहा है.

<abbr> – <abbr> Element का पूरा नाम Abbreviation होता है. Abbreviation Element से Abbreviation Define किया जाता है.

<b> – <b> Element का पूरा नाम Bold है. Bold Element से Text को Bold (गहरा) किया जाता है.

<big> – Big Element से Text को Normal Size से बडा करने के लिए किया जाता है.

<blockquote> – Blockquote Element का उपयोग Document में Text को Quote करने के लिए किया जाता है. इसका मुख्य उपयोग अन्य Source से प्राप्त Data को Quote करने के लिए होता है.

<center> – इसे Center Element कहते है. इससे किसी HTML Element की Center Position को Define किया जाता है.

<code> – Code Element से Computer Code को Define किया जाता है.

<del> – <del> Element का पूरा नाम Delete है. Delete Element से Document से Delete Text को Define किया जाता है.

<em> – <em> Element का पूरा नाम Emphasize होता है. इससे Text को Emphasized किया जाता है.

<font> – Font Element से Text का Font, Color और Size Define किया जाता है.

<i> – <i> Element का पूरा नाम Italic है. इससे Text को Italic यानि तिरछा किया जाता है.

<ins> – <ins> Element का पूरा नाम Insert है. Insert Element से Delete किए गए Text की जगह पर लिखे गए Text को Define किया जाता है.

<mark> – Mark Element से Text को Highlight किया जाता है.

<pre> – <pre> Element का पूरा नाम Preformat है. इस Element से Preformatted Text को Define किया जाता है.

<q> – <q> Element का पूरा नाम Quotation है. Quotation Element से छोटा Quotation Define किया जाता है. जैस; किसी शब्द या शब्दांश को Quote करने के लिए <q> Element का उपयोग किया जाता है.

<small> – Small Element से Text को Normal Size से छोटा दिखाने के लिए किया जाता है.

<strike> – <strike> Element का पूरा नाम Strikethrough है. Strikethrough Element से Strikethrough Text को Define किया जाता है. इससे Text के बीछ में एक Line आ जाती है.

<strong> – इससे Important Text को Define किया जाता है.

<sub> – <sub> Element का पूरा नाम Subscript होता है. <sub> Element से Text को Subscript किया जाता है.

<sup> – <sup< Element का पूरा नाम Suprescript है. इससे Text को Suprescript किया जाता है.

<u> – <u> Element का पूरा नाम Underline होता है. इस Element से Text को Underline किया जाता है. मतलब Text के नीचे एक Line आ जाती है.

Style Tags

Style Tags के द्वारा एक HTML Document की Style Information को Define किया जाता है. नीचे Style Tags के बारे में बताया जा रहा है.

Image Tags

Image Tags के द्वारा HTML Document में Image Insert करने के लिए किया जाता है. नीचे Image Tags के नाम और इनके उपयोग के बारे में बताया जा रहा है.

<img> – <img> Element का पूरा नाम Image होता है. इस Element द्वारा Document में Image को Define किया जाता है.

<map> – <map> Element से Image-Map को Define किया जाता है.

<area> – <area> Element से Image-Map में एक विशेष Area कोक Define किया जाता है.

Link Tags

Link Tags का उपयोग HTML Document में Hyperlinks बनाने और अन्य बाहरी Documents को जोडने के लिए किया जाता है. नीचे Link Tags का नाम और उनके उपयोग के बारे में बताया जा रहा है.

<a> – <a> Element का पूरा नाम Anchor है. Anchor Element का उपयोग Document में Hyperlink बनाने के लिए किया जाता है.

Section Tags

Section Tags का उपयोग एक HTML Document को विभिन्न भागों में विभाजित करने के लिए किया जाता है. नीचे कुछ Section Tags के नाम और उनके उपयोग के बारे में बताया जा रहा है.

<span> – <span> Element के द्वारा एक HTML Document में inline Sections बनाए जाते है. इसके द्वारा एक शब्द, Paragraph, Paragraphs का एक Section बना सकते है.

<div> – <div> Element का पूरा नाम Division है. Division Element से HTML Document में अलग-अलग Sections को Define किया जाता है.

List Tags

List Tags के द्वारा HTML Document में Lists बनाई जाती है. आप Number Lists, Bullet Lists,Order Lists, Unorder Lists और Definition Lists Create कर सकते है. नीचे Lists Tags के नाम और उनके उपयोग के बारे में बताया जा रहा है.

<ul> – <ul> Element का पूरा नाम Unorder List होता है. Unorder List Element द्वारा Bullet Lists या Unorder Lists बनाई जाती है.

<ol> – <ol> Element का पूरा नाम Order List होता है. Order List Element द्वारा Number या Order Lists बनाई जाती है.

<li> – <li> Element का पूरा नाम List Item होता है. List Item Element द्वारा एक List में लिखे जाने वाले Data को Define किया जाता है.

<dl> – <dl> Element का पूरा नाम Definition List होता है. Definition List Element द्वारा Definition Lists को Define किया जाता है.

<dt> – <dt> Element का पूरा नाम Definition Term होता है. Definition Term Element द्वारा Definition Term को Define किया जाता है.

<dd> – <dd> Element का पूरा नाम Definition Description होता है. Definition Description Element द्वारा Definition Terms के Description को Define किया जाता है.

Table Tags

Table Tags के द्वारा HTML Document में Table Create करने के लिए किया जाता है. Table से Data को Tabular Format में Present किया जाता है. नीचे Table Tags के नाम और उनके उपयोग के बारे में बताया जा रहा है.

<table> – <table> Element से Table को Define किया जाता है.

<caption> – <caption> Element का उपयोग Table Caption यानि शीर्षक Define करने के लिए किया जाता है.

<th> – &th;th> Element का पूरा नाम Table Header होता है. Table Header Element द्वारा Table Header यानि Cells को Define किया जाता है.

<tr> – <tr> Element का पूरा नाम Table Row होता है. Table Row Element द्वारा Table Row को Define किया जाता है.

<td> – <td> Element का पूरा नाम Table Data होता है. Table Data Element द्वारा Table Data को Define किया जाता है. यानि जो Data हम Table में लिखना चाहता है.

<thead> – <thead> Element का पूरा नाम Table Header होता है. Table Header Element द्वारा Header Content का Group बनाया जाता है.

<tbody> – <tbody> Element का पूरा नाम Table Body होता है. Table Body Element द्वारा Table के Body Content को Group किया जाता है.

<tfoot> – <tfoot> Element का पूरा नाम Table Footer होता है. Table Footer द्वारा Footer Content को Group किया जाता है.

Forms & Input Tags

Form Tags का उपयोग एक HTML Document में अलग-अलग प्रकार के Forms बनाने के लिए किया जाता है. नीचे Form Tags के नाम और उनके उपयोग के बारे में बताया जा रहा है.

<form> – <form> Element का उपयोग HTML Document में Form Create करने के लिए किया जाता है.

<input> – <input> Element का उपयोग HTML Form में विभिन्न प्रकार के Input Controls Create करने के लिए किया जाता है.

<textarea – <textarea> Element द्वारा Form में Text Area बनाया जाता है.

<button> – <button> Element से Form में Buttons बनाए जाते है.

<option> – <option> Element के द्वारा Drop-Down List में Options बनाने के लिए किया जाता है.

<optgroup> – <optgroup> Element का पूरा नाम Option Group होता है. इस Element द्वारा Drop-Down List मे एक प्रकार एक Options का एक Group बनाया जाता है.

<label> – <label> Element द्वारा एक Input Element के लिए Label को Define किया जाता है.

<fieldset> – <em> Element द्वारा Form में एक प्रकार के Elements का एक Group बनाया जाता है.

<legend> – <em> Element द्वारा Fieldset Element के लिए Caption या शीर्षक बनाया जाता है.

Scripting or Programming Tags

Scripting Tags द्वारा एक HTML Document में कुछ Programming Codes को लिखा जाता है. नीचे Scripting Tags के नाम और उनके उपयोग के बारे में बताया जा रहा है.

Frame Tags

Frame Tags द्वारा एक HTML Document को कई Frames में बाँटा जा सकता है. मतलब एक Document को कई अलग-अलग Window बनाकर उनमे अलग-अलग Data Show करा सकते है. Frame का अब ज्यादा उपयोग नही किया जाता है. फिर भी जानकारी देने के लिए हमने Frame Tag के बारे में नीचे बताया है.

<frame> – <frame> Element के द्वारा HTML Document में Frames को Define किया जाता है.

<frameset> – <frameset> Element द्वारा एक Frameset को Define किया जाता है. Frameset को Frame Tag द्वारा अलग-अलग Rows और Columns में बाँटा जाता है.

<noframes> – <noframes> Element द्वारा उन ब्राउजरों एक लिए वैकल्पिक (Alternet) Content को लिखा जाता है, जो Frames को Support नही करते है.

Meta Tags

Meta Tags द्वारा एक Webpage के बारे में Information को लिखा जाता है. इस Information का उपयोग Search Engines द्वारा HTML Document के बारे में जानकारी लेने के लिए किया जाता है. नीचे मुख्य Meta Tags के नाम और ��नके उपयोग के बारे में बताया जा रहा है.

<head< – <head> Element का पूरा नाम Header होता है. Header Element द्वारा एक Document के बारे में Information को Define किया जाता है.

<base> – <base> Element का उपयोग एक Document में Related URLs के लिए एक Base URL Define करने के लिए किया जाता है.

from Blogger http://bkcomputercafe.blogspot.com/2018/09/all-html-tags-list-in-hindi.html via IFTTT

#IFTTT #Blogger

0 notes